Форматирование CSS для держания вместе
При наличии heck времени с получением этого форматирования, корректного, таким образом, ценились бы любые идеи. у нас есть набор информации, имеющей отношение foos, что мы хотим сохранить, группировался. Таким образом, если бы у нас был набор foos, перечисленного друг рядом с другом, если бы тот элемент заставляет foos переноситься, все нечто осталось бы вместе. Также форматирование должно быть похожим: Таким образом, текст налево, и числа направо.
|-----------------------------------------------------|
|[icon] Brad (human) [pic] (2) [pic] (3)|
|-----------------------------------------------------|
Таким образом, основной значок является крайним левым затем, имя и модель, и затем выровненный по правому краю являются одноуровневыми элементами, и дети (с CSS встроил значки для каждого).
Каждое нечто может иметь следующее:
foo.id = 12345
foo.name = 'brad'
foo.model = 'human'
foo.image = ''
foo.kids = 3
foo.siblings = 2
foo.link = ''
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>none</title>
<style type="text/css" >
body
{
margin: 0;
padding: 0;
min-width: 850px;
text-align: left;
line-height: 28px;
font-size: 14px;
font-family: Verdana,Tahoma,Arial;
}
#content
{
width: 800px;
border: solid 1px #000000;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
div.foo
{
display: inline;
min-width: 250px;
width: 250px;
border: dotted 1px #b8b8b8;
padding: 0px 15px 0px 0px;
vertical-align: middle;
}
.foo .id
{
display: none;
}
.foodata
{
display: inline;
text-align: left;
white-space: nowrap;
margin: 2px 2px 2px 2px;
}
.fooname
{
display: inline;
min-width: 80px;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
}
.foomodel
{
display: inline;
min-width: 80px;
color: #000000;
font-size: 12px;
}
.foocounts
{
min-width: 90px;
text-align: right;
display: inline;
}
.foosiblings
{ /* add in image for children */
background: url(../../images/siblings.png) no-repeat 4px 10%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fookids
{ /* add in image for connection */
background: url(../../images/kids.png) no-repeat 4px 25%;
text-align: right;
font-size: 12px;
min-width: 50px;
display: inline;
}
.fooimage
{
display: inline;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="content" >
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Brad</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(3)</span>
<span class="fookids" >(2)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Tom</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(1)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Harry</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="foosiblings" >(6)</span>
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Sally</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
</span>
</a>
</div>
<div class="foo" >
<span class="id" >12345</span>
<a href="" class="foolink" >
<img src="" alt="XX" class="fooimage" height="16" width="16" />
<span class="foodata" >
<span class="fooname" >Peggy</span>
<span class="foomodel" >(human)</span>
</span>
<span class="foocounts" >
<span class="fookids" >(12)</span>
<span class="foosiblings" >(16)</span>
</span>
</a>
</div>
</div>
</body>
</html>Важная часть, я хочу держать все нечто вместе в одном большом блоке, так как я использую эту структуру на всем протяжении страницы. В случае необходимости структура нечто может измениться, я имею полный контроль над ним.
4 ответа
Это пример, в котором «разрешено» использование таблиц. Потому что это табличные данные. В некоторой степени.
Выполнение всего в div подходит для макетов, но на самом деле вы перечисляете элементы в виде строк и столбцов. Это таблица в моей книге.
Чтобы сохранить все вместе, добавьте следующее:
div.foo
{
white-space:nowrap;
}
Итак, у вас есть группа div-ов, каждый из которых содержит некоторый контент, и вы хотите, чтобы они отображались рядом друг с другом в ряд?
.foo { float: left; }
заставит их перемещаться влево, и они будут все появляются рядом друг с другом; каждая коробка упакована в термоусадочную пленку до минимально необходимой ширины.
Стиль white-space:nowrap действительно предотвращает ломание "foo" div, но я также обнаружил, что это приводит к тому, что они выдуваются из ширины, определенной в "content" div.
Я обнаружил, что следующее работает в IE, Firefox и Chrome (только для ПК, у них сейчас нет доступа к Mac)
div.foo
{
display:inline-block;
}