Я пытаюсь сделать таблицу, которая выглядит следующим образом:Попытка сделать специальную таблицу
Но я не совсем уверен, как идти о выполнении этого.
Конечный результат должен выглядеть следующим образом:
Я планировал на том, делая DIV, а затем установить фон в DIV быть серой текстурированной часть, а затем создать таблицу внутри этого div для организации контента. Правильно ли используется таблица в этой ситуации? Или есть лучший метод? Заранее спасибо.
Придерживайтесь разметки, отличной от таблицы. Лучшие практики сегодня предполагают, что вы должны использовать таблицы только для табличных данных, и этот контент не является табличными данными.
Существует несколько способов, которые вы могли бы использовать для этого, включая использование поплавков, отображение встроенного блока и другие. Также есть соображения, связанные с оберткой содержимого вокруг изображений (если контент длинный, например).
Но вот несколько примеров кода, которые помогут вам прокатиться.
Стили:
div.left,
div.right {
width: 400px;
overflow: hidden; /* forces the div to clear the floated content */
}
div.left img,
div.right img {
border: 2px solid #888;
}
div.left img {
float: left;
padding-right: 20px;
}
div.right img {
float: right;
padding-left: 20px;
}
HTML-разметки:
<div class="left">
<img src="your_image_source"><p>Lorem Ipsump dolor sit amet</p>
</div>
<div class="right">
<img src="your_image_source"><p>Lorem Ipsum dolor sit amet</p>
</div>
Вот DEMO
Это должно показать вам именно то, что вам нужно.
<body>
<div id="topLeft"></div>
<div id="topRight"></div>
<div id="middleLeft"></div>
<div id="middleRight"></div>
<div id="bottomLeft"></div>
<div id="bottomRight"right></div>
</body>
body {
height:400px;
}
#topLeft {
background-color:#000000;
width:32%;
height:32%;
margin:5px;
float:left;
}
#topRight {
float:right;
background-color: #000000;
width:65%;
height:32%;
margin:5px;
}
#middleLeft {
background-color:#000000;
width:65%;
height:32%;
margin:5px;
float:left;
}
#middleRight {
float:right;
background-color: #000000;
width:32%;
height:32%;
margin:5px;
}
#bottomLeft {
float:left;
background-color: #000000;
width:32%;
height:32%;
margin:5px;
}
#bottomRight {
float:right;
background-color: #000000;
width:65%;
height:32%;
margin:5px;
}
Кузов можно заменить оберткой и соответствующим образом.
Code on jsFiddle
Fooey на тех ненавистниках, которые говорят, что не используют таблицы. Я бы полностью использовал таблицу для этого.
<table>
<tr>
<td colspan=1><img src="yadayada"></td>
<td colspan=2>Lorem Ipsum...</td>
</tr>
<tr>
<td colspan=2>Lorem Ipsum...</td>
<td colspan=1><img src="yadayada"></td>
</tr>
<tr>
<td colspan=1><img src="yadayada"></td>
<td colspan=2>Lorem Ipsum...</td>
</tr>
</table>
Это не всегда работает: браузеры могут запутаться в вычислении ширины столбцов, если указанные столбцы никогда не появляются без объединения. Гораздо предпочтительнее использовать один из вариантов floaty для того, что хочет OP. – Martha
Не ненавидя, просто были в стороне от использования таблиц для макета и заплатили цену. Этот образец имеет большую разметку и менее настраивается, чем макет таблицы. С помощью решения, отличного от таблицы, быстрый щелчок css может вносить изменения, которые невозможно с помощью табличного решения. –
Лучшим методом было бы просто использовать div для каждого раздела. Я работаю над jsFiddle, чтобы показать вам концепцию. –
, а затем просто плавайте их влево и вправо в контейнере div? – Bucthree
Возможно, вы захотите посмотреть компоненты загрузочных лесов, или вы можете установить фиксированную ширину для div каждой строки. Но так или иначе, почему бы вам не использовать таблицу? – choz