Как бы вы это сделали: таблицы или CSS? [закрытый]

головоломка http://sontag.ca/TheChallenge/tiles.gif Гринч http://sontag.ca/gif/grinch.gif



Часть I



этот макет можно сделать довольно просто с 2 таблицами HTML, одна вложенная в другую, или даже с одной таблицей.



Это также может быть сделано с помощью CSS, хотя это может включать еще немного подумать.



это может быть не реальный макет мира, но я видел страницы, которые похожи. Считайте это загадкой; упражнение, чтобы поднять ваши навыки CSS.



чтобы сделать вещи немного интереснее, я сформулировал вопрос в небольшой 2 части веб-страницы под названием Вызов. Мы рассмотрим код и вопрос:макет с таблицами или CSS?, бок о бок, удар за ударом, поскольку наши два противника сражаются за превосходство кода.



Часть I излагает как Вызов пришел, чтобы быть. Я надеюсь, что вы наслаждаться.



Часть II Решение. вы можете быть удивлены,.




Часть II



Я был поражен тем, как быстро действительно хорошие ответы появились лишь минут после того, как я написал. Это был унизительный опыт. У меня нет никакого желания соревноваться с вами во временных испытаниях.



но, все это было сказано, после тщательного изучения предлагаемых решений, я пришел к
поймите, что ни одно из решений CSS (в том числе и мой собственный в то время) работал, а также любой из предлагаемых табличных решений. Проблема заключалась в том, что CSS был лучше, чем таблицы для любой планировочного решения.



поэтому я добавил 3 новых правила (Помните, что одно из правил заключается в том, что правила могут быть изменены). Это раздражало некоторых людей. Тогда я добавил несколько красочных объяснений о том, почему правила были изменены. Я думаю, что это раздражало их еще больше.




  1. наш сад должен иметь забор вокруг что-то, что отделяло бы его от любого унылого окружения, в котором он мог бы оказаться; и не слишком дорого, но легко содержать в чистоте.
    Так что я хочу 1 пиксель черной границы вокруг сада


  2. жители каждого садового участка (персонажи) должны быть либо черными, либо белыми, в зависимости от того, что показывает им лучшее в их саду. Также все они имеют курсивный спуск. Курсивом их не выделишь. ; -)


  3. сад перемещается, то есть я могу иметь этот сад, в любом месте страницы (без абсолютного позиционирования).


это то, что окончательный вывод должен выглядеть (цвет фона необязательно):



alt текст http://sontag.ca/gif/garden.gif



мои извинения за капризные и в последнюю минуту изменения правил. Я ошибся. Жители каждого садового участка-ремесленники, специалисты ручной работы. Они-потомки скоропись семьи, и обязаны своим чувством стиля на курсив.



сад должен быть перемещаемым, потому что оба вида садов (таблица и CSS) должны сосуществуют на той же странице. Я могу ошибаться, говоря, что position:absolute правила не допускается. Если вы можете заставить их работать в этом контексте, то больше мощности для вас. Они, безусловно, будут приняты.



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



сейчас я живу в Голландии, и сезон тюльпанов быстро приближается. Если вы пролетите над Голландией в ближайшие несколько недель, и это ясный день (вид редкий здесь) пейзаж ниже, вы будете выглядеть довольно похожим на это глупое упражнение.



Я не без ума от оранжевого, но я люблю и восхищаюсь голландцами, поэтому у нас есть оранжевый фон, дань моей принимающей стране. : -)




часть III



я опубликовал ответ таблицы Теда из задачи ниже вместе с этим изображением



alt текст http://sontag.ca/gif/garden2.gif



потому что жильцы могут быть легко добавлены к садовым участкам, не касаясь правил CSS-все автоматически центрируется.



вы можете сделать это с помощью CSS?вы можете срубить самое могучее дерево в лесу... один селедка?




обновление: ответ Чарли здесь.

684   12  

12 ответов:

обновление:окончательное редактирование. переключился на строгий DTD, удалил курсив, чтобы соответствовать изображению в вопросе, и вернулся к полноцветным именам для идентификаторов, чтобы показать намерение в соответствии с комментарием OPs на вопрос, и отсортировал основной столбец имен идентификаторов в css в порядке их появления в html.

Я также решил не использовать внешний div в качестве белого квадрата 7 (у него не было собственного div в предыдущие правки), как это не было бы практично, если вы хотели использовать макет и чувствовали себя немного как обман (хотя с точки зрения краткости/пикселя мне понравилась его дерзость).

посмотреть здесь: http://jsbin.com/efidi
Редактировать здесь:http://jsbin.com/efidi/edit
проверяет как XHTML strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>The Challenge</title>
<style type="text/css">
div     { text-align: center; width:175px; height:175px; line-height: 35px;}
div div {         float:left; width: 35px; height: 35px;}
#orange, #maroon,
#blue  , #green  {float:right;}

#orange, #silver {background-color:silver;  width:140px;}
#navy  , #maroon {background-color:maroon; height:140px; line-height:140px;}
         #navy   {background-color:navy  ;}
#green , #red    {background-color:red   ;  width: 70px;}
#yellow, #blue   {background-color:blue  ; height: 70px; line-height: 70px;}
         #yellow {background-color:yellow;}
         #white  {background-color:white ;}
         #green  {background-color:green ;}
         #orange {background-color:orange;}
</style> 
</head> 
<body> 
  <div> 
    <div id="silver">1</div> 
    <div id="maroon">2</div> 
    <div id="navy"  >3</div> 
    <div id="red"   >4</div> 
    <div id="blue"  >5</div> 
    <div id="yellow">6</div> 
    <div id="white" >7</div>
    <div id="green" >8</div> 
    <div id="orange">9</div> 
  </div>
</body></html>

в сторону: я бы, возможно, поставил немного больше пробелов, если бы мог, но это на пределе, прежде чем блоки кода здесь на SO начинает получать полосы прокрутки, и я решил, чтобы все это появилось на экране.

Примечание: я позаимствовал line-height исправить Тайсон (кто был первым, чтобы получить правильный ответ рендеринга).

37  
2017-05-23 13:29:39

вот три варианта решения.

разметка:

<div id="outer">
    <div id="a1">1</div>
    <div id="a2">2</div>
    <div id="a3">3</div>
    <div id="a4">4</div>
    <div id="a5">5</div>
    <div id="a6">6</div>
    <div id="a7">7</div>
    <div id="a8">8</div>
    <div id="a9">9</div>
</div>

базовая таблица стилей (размеры и цвет):

#outer {
    width: 20em;
    height: 20em;
}
#a1 {
    background-color: #C0C0C0;
    width: 80%;
    height: 20%;
}
#a2 {
    background-color: #800000;
    width: 20%;
    height: 80%;
}
#a3 {
    background-color: #000080;
    width: 20%;
    height: 80%;
}
#a4 {
    background-color: #FF0000;
    width: 40%;
    height: 20%;
}
#a5 {
    background-color: #0000FF;
    width: 20%;
    height: 40%;
}
#a6 {
    background-color: #FFFF00;
    width: 20%;
    height: 40%;
}
#a7 {
    background-color: #FFFFFF;
    width: 20%;
    height: 20%;
}
#a8 {
    background-color: #008000;
    width: 40%;
    height: 20%;
}
#a9 {
    background-color: #FFA500;
    height: 20%;
    width: 80%;
}

а теперь позиционирование:

  • используя float:

    #a1 {
    float: left;
}
#a2 {
    float: right;
}
#a3 {
    float: left;
}
#a4 {
    float: left;
}
#a5 {
    float: right;
}
#a6 {
    float: left;
}
#a7 {
    float: left;
}
#a8 {
    float: right;
}
#a9 {
    float: right;
}

  • используя position:

    #outer {
    position: relative;
}
#outer div {
    position: absolute;
}
#a1 {
    top: 0;
    left: 0;
}
#a2 {
    top: 0;
    right: 0;
}
#a3 {
    top: 20%;
    left: 0;
}
#a4 {
    top: 20%;
    left: 20%;
}
#a5 {
    top: 20%;
    right: 20%;
}
#a6 {
    top: 40%;
    left: 20%;
}
#a7 {
    top: 40%;
    left: 40%;
}
#a8 {
    bottom: 20%;
    right: 20%;
}
#a9 {
    bottom: 0;
    right: 0;
}

  • используя margin:

    #a1 {
}
#a2 {
    margin: -20% -80% 0 80%;
}
#a3 {
    margin: -60% 0 0 0;
}
#a4 {
    margin: -80% -20% 0 20%;
}
#a5 {
    margin: -20% -60% 0 60%;
}
#a6 {
    margin: -20% -20% 0 20%;
}
#a7 {
    margin: -40% -40% 0 40%;
}
#a8 {
    margin: 0 -40% 0 40%;
}
#a9 {
    margin: 0 -20% 0 20%;
}
18  
2009-03-12 02:02:22

здесь вы идете-меньше строк, чем любое неправильное использование тегов таблицы может обеспечить:

<img
    src="http://sontag.ca/TheChallenge/tiles.gif"
    alt="nine assorted coloured rectangles"
/>

: P

16  
2009-03-12 02:46:19

это точно соответствует вашему примеру таблицы, включая вертикально и горизонтально центрированный текст (который до сих пор никто не делал).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Boxy Boxes in a Box</title>

    <style type="text/css" media="screen">
        #container {position: relative; margin: 100px auto; height: 175px; width: 175px; font-style: italic; }

        .box {width: 35px; height: 35px; position: absolute; text-align: center; line-height: 35px;}

        #box_1 {top: 0; left: 0; width: 140px; background-color: silver;}
        #box_2 {top: 0; right: 0; height: 140px; background-color: maroon; line-height: 140px;}
        #box_3 {top: 35px; left: 0; height: 140px; background-color: navy; line-height: 140px;}
        #box_4 {top: 35px; left: 35px; width: 70px; background-color: red;}
        #box_5 {top: 35px; right: 35px; height: 70px; background-color: blue; line-height: 70px;}
        #box_6 {top: 70px; left: 35px; height: 70px; background-color: yellow; line-height: 70px;}
        #box_7 {top: 70px; left: 70px; background-color: white;}
        #box_8 {bottom: 35px; right: 35px; width: 70px; background-color: green;}
        #box_9 {bottom: 0; right: 0; width: 140px; background-color: orange;}
    </style>
</head>

<body>
    <div id="container">
        <div id="box_1" class="box">1</div>
        <div id="box_2" class="box">2</div>
        <div id="box_3" class="box">3</div>
        <div id="box_4" class="box">4</div>
        <div id="box_5" class="box">5</div>
        <div id="box_6" class="box">6</div>
        <div id="box_7" class="box">7</div>
        <div id="box_8" class="box">8</div>
        <div id="box_9" class="box">9</div>
    </div>
</body>
</html>
13  
2009-03-12 01:35:24

покуда ширины и высоты постоянн, одно может всегда использовать абсолютный располагать для того чтобы получить такое же влияние. Это должно быть достаточно очевидно, так что мне не нужно печатать его (здесь поздно, и я ленив :P)

4  
2009-03-12 01:35:43

Я взял немного другой подход, чем" id все " решения, которые я видел до сих пор. Это происходит менее чем на 100 символов больше, чем решение на основе таблицы.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
    position:absolute;
    width:35px;
    height:35px;
    text-align:center;
    line-height:35px
}

.spiral { width:175px; height:175px }

.t { top:0 }
.l { left:0 }
.r { right:0 }
.b { bottom:0 }
.w { width:140px }
.h { height:140px; line-height:140px }
.c {
    top:35px;
    left:35px;
    width:105px;
    height:105px
}

.c .w { width:70px }
.c .h { height:70px; line-height: 70px }
.c .c { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
    <div class="t l w" style="background-color:silver">1</div>
    <div class="t r h" style="background-color:maroon">2</div>
    <div class="b l h" style="background-color:navy">3</div>
    <div class="c">
        <div class="t l w" style="background-color:red">4</div>
        <div class="t r h" style="background-color:blue">5</div>
        <div class="b l h" style="background-color:yellow">6</div>
        <div class="c">7</div>
        <div class="b r w" style="background-color:green">8</div>
    </div>
    <div class="b r w" style="background-color:orange">9</div>
</div>
</body>
</html>

Edit: на основе ваших изменений я публикую немного более подробное, но, надеюсь, более четкое решение, которое добавляет черную границу, устанавливает некоторый текст на белый и не совсем позиционирует "сад".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
div {
    position:absolute;
    width:35px;
    height:35px;
    text-align:center;
    line-height:35px
}

div.spiral {
    position:relative;
    width:175px;
    height:175px;
    border: 1px solid #000
}

.top { top:0 }
.left { left:0 }
.right { right:0 }
.bottom { bottom:0 }
.wide { width:140px }
.tall { height:140px; line-height:140px }
.center {
    top:35px;
    left:35px;
    width:105px;
    height:105px
}

.center .wide { width:70px }
.center .tall { height:70px; line-height: 70px }
.center .center { width:35px; height: 35px }
</style>
</head>
<body>
<div class="spiral">
    <div class="top left wide" style="background-color:silver">1</div>
    <div class="top right tall" style="background-color:maroon">2</div>
    <div class="bottom left tall" style="background-color:navy;color:#fff">3</div>
    <div class="center">
        <div class="top left wide" style="background-color:red">4</div>
        <div class="top right tall" style="background-color:blue">5</div>
        <div class="bottom left tall" style="background-color:yellow">6</div>
        <div class="center">7</div>
        <div class="bottom right wide" style="background-color:green">8</div>
    </div>
    <div class="bottom right wide" style="background-color:orange">9</div>
</div>
</body>
</html>
4  
2009-03-13 09:58:59

никто здесь еще не дал табличного решения, и проблема заключается в сравнении макетов CSS с макетами на основе таблиц в контролируемом (и сильно предвзятом) сценарии.

Итак, вот решение таблицы макета Теда и его задача...

" С моим решением на основе таблицы очень легко добавлять новых жителей на садовые участки очень простые дополнения к разметке HTML только! Все жители автоматически центрированы и расположены в приятном стиле. Для пример:"

alt текст http://sontag.ca/gif/bluefish.gif alt текст http://sontag.ca/gif/garden2.gif

" насколько я могу судить, никакие решения на основе CSS здесь не могут разместить новых жителей без обширной реконструкции правил CSS."

"лучше принесите много денег мальчики, я чувствую себя очень голодным и пить сейчас."

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Terrible Ted's Table Layout</title>
<style type="text/css">

#master TD { text-align: center }
#master { 
  border: 1px solid black;
  font: italic 100%/200% 'Comic Sans MS', cursive; 
}
#silver { background-color:silver }
#maroon { background-color: maroon;  color:white }
#navy { background-color:navy;  color:white }
#red { background-color: red }
#blue { background-color:blue;  color:white }
#yellow { background-color: yellow }
#green { background-color:green;  color:white }
#orange { background-color:orange }
#white { background-color:white }

#silver, #red, #green, #orange, #white { height: 35px }
#maroon, #navy, #blue, #yellow, #white { width: 35px }

</style>
</head>
<body style="background-color:#ffb600">

<table id="master" border="0" cellpadding="0" cellspacing="0" 
  summary="layoutByTable"><tr>
    <td id="silver" colspan="2" > 1 </td> 
    <td id="maroon" rowspan="2" > 2 </td>
  </tr><tr>
  <td id="navy" rowspan="2" > 3 </td>
  <td>
    <table border="0" cellpadding="0" cellspacing="0" 
      summary="inner"><tr>
        <td id="red" colspan="2" > 4 </td>
        <td id="blue" rowspan="2" > 5 </td>
      </tr><tr>
        <td id="yellow" rowspan="2" > 6 </td>
        <td id="white"> 7 </td>
      </tr><tr>
        <td id="green" colspan="2" > 8 </td>
      </tr>
    </table>
  </td>
</tr><tr>
 <td id="orange" colspan="2"> 9 </td>
</tr>
</table>

</body>
</html>
4  
2009-03-13 11:41:34

один стол.

теперь не опускайте-голосуйте за меня.

Я знаю, что это не ответ на исходный вопрос.
Я опубликовал этот ответ, потому что ОП просил его в комментарии к исходному вопросу.

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="Content-language" content="en" />
        <title>The Challenge</title>
    </head>
    <body>

        <table cellspacing="0" cellpadding="0" border="0" summary="">
            <tr>
                <td colspan="4" height="35" align="center" bgcolor="silver"><i>1</i></td>
                <td rowspan="4" width="35" align="center" bgcolor="maroon"><i>2</i></td>
                <td rowspan="5" valign="bottom"><img src="http://sontag.ca/gif/grinch.gif" width="41" height="122" alt="Dr. Suess's Grinch"/></td>
            </tr><tr>
                <td rowspan="4" width="35" align="center" bgcolor="navy"><i>3</i></td>
                <td colspan="2" height="35" align="center" bgcolor="red"><i>4</i></td>
                <td rowspan="2" width="35" align="center" bgcolor="blue"><i>5</i></td>
            </tr><tr>
                <td rowspan="2" width="35" align="center" bgcolor="yellow"><i>6</i></td>
                <td width="35" height="35" align="center"><i>7</i></td>
            </tr><tr>
                <td colspan="2" height="35" align="center" bgcolor="green"><i>8</i></td>
            </tr><tr>
                <td colspan="4" height="35" align="center" bgcolor="orange"><i>9</i></td>
            </tr>
        </table>

    </body>
</html>

это действительный XHTML 1.0 переходный, и я включил характер доктора Зюсс :)

зачисткой Dr. Suess character на <?xml декларации meta-tags и summary атрибут вы могли бы сократите его до 929 символов и все еще действительны XHTML 1.0 Transitional.

Edit

как спрошено, XHTML 1.0 строгое

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>The Challenge</title>
        <style type="text/css">
            BODY {background: orange}
            #garden {border: 1px solid black; color: black}
            #garden TD {
                font: italic 100% 'Comic Sans MS', cursive;
                height: 35px;
                padding: 0;
                text-align: center;
                width: 35px
            }
            #c1 {background: silver}
            #c2 {background: maroon; color: white}
            #c3 {background: navy;   color: white}
            #c4 {background: red}
            #c5 {background: blue;   color: white}
            #c6 {background: yellow}
            #c7 {background: white}
            #c8 {background: green;  color: white}
            #c9 {background: orange}
        </style>
    </head>
    <body>

        <table id="garden" cellspacing="0">
            <tr>
                <td id="c1" colspan="4">1</td>
                <td id="c2" rowspan="4">2</td>
            </tr><tr>
                <td id="c3" rowspan="4">3</td>
                <td id="c4" colspan="2">4</td>
                <td id="c5" rowspan="2">5</td>
            </tr><tr>
                <td id="c6" rowspan="2">6</td>
                <td id="c7">7</td>
            </tr><tr>
                <td id="c8" colspan="2">8</td>
            </tr><tr>
                <td id="c9" colspan="4">9</td>
            </tr>
        </table>

    </body>
</html>

970 небелых символов, оранжевый фон, Гринч доктора Суэсса удален.

4  
2009-03-15 11:15:53

краткость разметки....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>The Challenge</title>
<style type="text/css">
    .garden {
        position: relative;
        width: 175px;
        height: 175px;
        font-family: 'Comic Sans MS', cursive;
        border: 1px solid;
        color: #000;
        }
    .garden div {
        position: absolute;
        width: 35px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        }
    .garden div:first-child {
        width: 140px;
        background: silver;
        }
    .garden div:first-child + div {
        right: 0;
        height: 140px;
        line-height: 140px;
        color: #fff;
        background: maroon;
        }
    .garden div:first-child + div + div {
        top: 35px;
        height: 140px;
        line-height: 140px;
        color: #fff;
        background: navy;
        }
    .garden div:first-child + div + div + div {
        top: 35px;
        left: 35px;
        width: 70px;
        background: red;
        }
    .garden div:first-child + div + div + div + div {
        top: 35px;
        right: 35px;
        height: 70px;
        line-height: 70px;
        background: blue;
        }
    .garden div:first-child + div + div + div + div + div {
        top: 70px;
        left: 35px;
        height: 70px;
        line-height: 70px;
        background: yellow;
        }
    .garden div:first-child + div + div + div + div + div + div {
        top: 70px;
        left: 70px;
        background: white;
        }
    .garden div:first-child + div + div + div + div + div + div + div {
        top: 105px;
        left: 70px;
        width: 70px;
        background: green;
        }
    .garden div:first-child + div + div + div + div + div + div + div + div{
        bottom: 0;
        right: 0;
        width: 140px;
        background: orange;
        }

    </style> 
</head> 
<body> 
<div class="garden"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
<div>6</div> 
<div>7</div>
<div>8</div> 
<div>9</div> 
</div>
</body>
</html>

ссылке

2  
2009-03-13 02:55:58

alt текст http://sontag.ca/gif/catInHat.gif я впервые сделал это упражнение чуть более 2 лет назад, когда я впервые изучал HTML и CSS. Мое первое решение было похоже на то, которое вы видите здесь, за исключением анонимных контейнерных Дивов. Затем я получил эту идею для веб-страницы, которая делала бок о бок сравнение CSS с таблицей, чтобы доказать, что CSS лучше. Поэтому я работал над Вызов страница, опубликовал его, а затем отвечал на этот вопрос.

Сэм Хаслер отправил ответ в течение нескольких минут, кажется, что было действительно близко. Я видел, что он был на пути к лучшему решению, чем то, что было у меня. Все его дивы были в порядке, а мои-нет. Jacco опубликовал комментарий с вопросом, почему я использовал две вложенные таблицы, когда один будет делать. Конечно, он тоже был прав.

У меня было два Гомер Симпсон"Ох!" моменты сразу. Я читал другие вопросы и ответы на таблицы против CSS. Кто-то упоминалось, что таблицы центрированы вертикально. Мой ответ тоже не был вертикальным, но я подумал, что это возможно. В конце концов, все дело в том, чтобы сделать все, что может сделать стол, и лучше. Я уже загнал себя в угол и выглядел как дурак, так что я С чтобы найти ответ.

В конце концов (мне стыдно сказать, как долго это было) я придумал решение ниже. Затем я смог выполнить свою оригинальную концепцию параллельного сравнения веб-сайтов страница.

вот объяснение того, как все это работает и почему вы должны использовать CSS

ответ Чарли...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Charlie's CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">

#outer { 
  width:175px; height:175px; 
  text-align:center; 
  font: italic 100%/200% 'Comic Sans MS', cursive;  
  border: 1px solid black;
}
#inner { width: 105px }
#outer>DIV, #inner>DIV { float:left }
#outer>DIV>DIV, #inner>DIV>DIV 
{ display: table-cell;  vertical-align: middle }
#c2 { clear: right }
#c3, #c6 { clear: left }

#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { height: 35px }
#c2>DIV, #c3>DIV, #c5>DIV, #c6>DIV, #c7>DIV { width:  35px }
#c2>DIV, #c3>DIV { height: 140px } 
#c1>DIV, #c9>DIV { width:  140px } 
#c5>DIV, #c6>DIV { height:  70px } 
#c4>DIV, #c8>DIV { width:   70px } 
#c2, #c6, #c7, #c8, #c9 { position:relative; top:-35px }
#c9 { left: 35px }

#c1 { background-color: silver }
#c2 { background-color: maroon; color: white }
#c3 { background-color: navy; color: white }
#c4 { background-color: red }
#c5 { background-color: blue; color: white }
#c6 { background-color: yellow }
#c7 { background-color: white }
#c8 { background-color: green; color: white }
#c9 { background-color: orange }

/* these rules are a HACK to center vertically in IE7 */
#outer>DIV>DIV, #inner>DIV>DIV { position:relative; }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { top: 10% }
#c5>DIV { top: 0% } 
#c6>DIV { top: 30% }
#c2>DIV { top: 0% }
#c3>DIV { top: 15% }

</style>
</head>
<body>

<div id="outer">
  <div id="c1"><div> 1 </div></div>
  <div id="c3"><div>3<br/>3<br/>3</div></div>
  <div id="inner">
    <div id="c4"><div> 4 </div></div>
    <div id="c5"><div> 5<br/>5 </div></div>
    <div id="c6"><div> 6 </div></div>
    <div id="c7"><div> 7 </div></div>
    <div id="c8"><div> 8 </div></div>
  </div>
  <div id="c2"><div> 2<br/>2<br/>2<br/>2 </div></div>
  <div id="c9"><div> 9 9 9</div></div>
</div>

</body>
</html>
1  
2009-03-14 05:31:02

Я думаю, что мы доказали, что существует более чем один способ сделать это. Элемент table тег и CSS являются жизнеспособными вариантами.

вместо того, чтобы добавить еще один способ завершить задачу, я просто хотел бы сказать, что, будь то проще или сложнее, проще или сложнее: таблицы в HTML должны использоваться для отображения табличных данных.

  • таблицы составила для табличных данных.
  • CSS-это составила для стиль / презентация.
1  
2009-04-28 22:15:40

вот пример, который не использует абсолютное позиционирование, не использует табличную ячейку и действителен в IE6-8, FF и т. д.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>Terrible Ted's Table Layout</title>
<style type="text/css">
#box{border:1px solid #000; width:175px; height:175px; color:navy; font-family:"Comic Sans MS"; font-size:13px; font-style:italic; text-align:center;}

div {float:left}

#c1, #c3, #c4, #c7, #c8, #c9{height:35px; line-height:35px}
#c2, #c3{height:140px;line-height:140px}
#c5, #c6{height:70px; line-height:70px}

#c1, #c9{width:140px}
#c2, #c3, #c5, #c6, #c7{width:35px}
#c4, #c8{width:70px}

#c6, #c7 {margin-top:-35px}

#c1{background-color:silver}
#c2{background-color:maroon; float:right}
#c3{background-color:navy}
#c4{background-color:red}
#c5{background-color:blue}
#c6{background-color:yellow}
#c7{background-color:white}
#c8{background-color:green}
#c9{background-color:orange}

</style>
</head>
<body>
<div id="box">
<div id="c1">1</div>
<div id="c2">2</div>
<div id="c3">3</div>
<div id="c4">4</div>
<div id="c5">5</div>
<div id="c6">6</div>
<div id="c7">7</div>
<div id="c8">8</div>
<div id="c9">9</div>
</div>
</body>
</html>
0  
2010-01-14 09:22:23

Comments

    Ничего не найдено.
Click here to cancel reply.