CSS макет с двумя столбцами с Javascript document.write - PullRequest
Новая
       59

CSS макет с двумя столбцами с Javascript document.write

1 голос
/ 01 мая 2020

Я пытаюсь завершить sh свою программу построения резюме для проекта класса. У меня есть все требования, кроме форматирования, и я ужасен с CSS. Я должен использовать функцию document.write для всех моих выводов, поэтому имейте это в виду.

Javascript

document.write("<div id=\"theLeft\"><p>Career Objective: </div>");
document.write("<div id=\"theRight\""+co+"</p></div>");

Это только одна из моих строк, и она выводит Первая часть, но ничего не отображается справа для моей переменной. Я попробовал это только с обычными тегами абзаца, и все отлично работает, только не правильно отформатированный. еще ничего не сработало. Прошу прощения за такой базовый c вопрос, но я просмотрел множество других веток ответов с двумя колонками и ничего не получил по-прежнему работать.

Ответы [ 2 ]

1 голос
/ 01 мая 2020

Во втором document.write() вы забыли закрыть элемент <div>, а также оставили тег <p>. Побег " может быть раздражающим. Вы можете создавать строки с одинарными кавычками ' или с двойными кавычками ". Комбинируя их, вы можете использовать одну из них в качестве строк. 

document.write('<div id="theLeft"><p>Career Objective: </div>');
document.write('<div id="theRight"><p>' + co + '</p></div>');

Что касается ваших CSS, держитесь подальше от свойств float и clear. Эти свойства являются старым способом создания макетов. Я бы даже предложил вам поискать более современный класс для разработки веб-приложений.

В настоящее время у нас есть Flexbox (одномерный макет) и CSS Grid Layout (2-мерное расположение) для создания наших макетов. Эти инструменты специально предназначены для размещения элементов в гибком потоке или (заранее определенной) сетке. В этом примере я буду использовать CSS Grid.

CSS Grid Layout имеет тип display, такой как block, inline и flex, и имеет свои собственные свойства для создания сетка. В этом случае вы хотите 2 столбца.

Сначала установите для свойства display значение grid: 

body {
  display: grid;
}

Теперь ваше тело является Родителем сетки , что означает, что все прямые дети в теле Сетка Дочерние элементы и могут быть расположены в сетке.
Создайте макет со следующими свойствами. 

body {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
}

grid-template-rows указывает, сколько строк должно быть в этой сетке. В этом случае мы установили ширину в 1 строку и высоту auto. Это сопоставимо с установкой свойства height: auto;, но для отдельной строки.
grid-template-columns устанавливает количество столбцов в сетке. В нем мы указываем 2 столбца и используем новое значение fr. fr означает дробь , и в этом случае это означает: "Между двумя столбцами разделите пробел. Дайте первый столбец 2 из 3 дробей и второй столбец 1 из 3 фракции ". . Это заканчивается разделением пространства 66.6% и 33.3%.

Вы также можете присвоить своим строкам и столбцам имя с помощью свойства grid-template-areas. Он обнаруживает строки и столбцы, которые мы уже определили, и позволяет нам давать им имена со строкой. 

body {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: 
    "left right";
}

Это говорит о том, что первый столбец в первой строке называется left, а второй столбец в Первый ряд называется right. И вы можете назначить ему дочерние элементы следующим образом с помощью свойства grid-area. 

div#theLeft {
  grid-area: left;
}

div#theRight {
  grid-area: right;
}

Ниже приведен рабочий пример кода с CSS Grid 

var co = 'To be the best!';

document.write('<div id="theLeft"><p>Career Objective: </div>');
document.write('<div id="theRight"><p>' + co + '</p></div>');
body {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-template-areas:
    "left right";
  font-size: 12pt;
  font-family: verdana;
}

div {
  padding: 20px;
}

div#theLeft {
  grid-area: left;
  background-color: #d0d0d0;
}

div#theRight {
  grid-area: right;
  background-color: #f0f0f0;
}
0 голосов
/ 01 мая 2020

Вы можете выяснить, как выглядят ваши строки, либо установив точку останова в отладчике вашего браузера, либо с помощью console API . Таким образом, опечатки становятся очевидными: 

var co = "Hellow, World!";
console.log("<div id=\"theLeft\"><p>Career Objective: </div>");
console.log("<div id=\"theRight\""+co+"</p></div>");

Кроме того, если, как я подозреваю, co содержит простой неэкранированный простой текст, ваш код небезопасен и может легко сломаться. Пожалуйста, сравните: 

var co = "When X<Y then Hellow, World!";
console.log("<div id=\"theRight\">"+co+"</p></div>");
console.log("<div id=\"theRight\">"+encodeHTML(co)+"</p></div>");

document.write("<div id=\"theRight\">"+co+"</p></div>");
document.write("<div id=\"theRight\">"+encodeHTML(co)+"</p></div>");

function encodeHTML(plainText){
    return String(plainText)
        .replace(/&/g, "&amp;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");
}

И последнее, но не менее важное, способ сделать это в 21 веке - использовать DOM API , например: 

var co = "When X<Y then Hellow, World!";
var div = document.createElement("div");
div.id = "theRight";
div.innerText = co;
document.querySelector("section").appendChild(div);
<section></section>
...