Как использовать CSS для позиционирования div? - PullRequest
Новая
       23

Как использовать CSS для позиционирования div?

0 голосов
/ 31 октября 2009

У меня есть HTML, который выглядит примерно так 

<div>
  <div id="header"></div>
  <div id="chart"></div>
  <div id="legend"></div>
  <div id="info1"></div>
  <div id="info2"></div>
  <div id="info3"></div>
</div>

Я бы хотел расположить элементы следующим образом: positioning

Как в мире я могу это делать?

Редактировать: Это вопрос о "правильном способе сделать это", и он, безусловно, не легко Google. По сути, вместо того, чтобы определять столбцы в html, я хочу определить высоту контейнера div, а затем сделать так, чтобы другие элементы div сами располагались внутри него.

Ответы [ 12 ]

6 голосов
/ 31 октября 2009

Вот с чего начать:

HTML 

<div id="header"></div>
<div id="left-column">
    <div id="chart"></div>
    <div id="legend"></div>
</div>
<div id="right-column">
    <div id="info1"></div>
    <div id="info2"></div>
    <div id="info3"></div>
</div>
<div class="clear"><!-- --></div>

CSS 

#left-column{position:relative;float:left;width:50%;}
#right-column{position:relative;float:right;width:50%;}
.clear{clear:both;}
4 голосов
/ 31 октября 2009

Следующий код позволит вам позиционировать DIV без какой-либо дополнительной разметки HTML: 

//* in order to view the results */
div#header, div#chart, div#legend,
div#info1, div#info2, div#info3
{ border: 1px solid black; }

/* IE requirement to center on screen */
body { text-align: center; }

/* define container size */
div
{
 width: 500px;
 margin: auto; 
 padding: 0;
 text-align: center;
}


/* for header, just define the size */
div#header
{
 width: 500px;
 height: 50px;
}

/* chart and legend are left floating
   and do not allow other elements to their left */
div#chart
{
 width: 248px;
 height: 250px;
 float: left;
 clear: left;
}
div#legend
{
 width: 248px;
 height: 202px;
 float: left;
 clear: left;
}

/* cover the rest with info divs */
div#info1, div#info2, div#info3
{
 width: 248px;
 display: block;
 height: 150px;
 margin-left: 248px;
}

Вы заметите некоторые странные измерения размеров; это попытка бороться с тем, как браузеры по-разному относятся к измерению элемента (если они должны включать границу или нет). Окончательный рендеринг практически идентичен трем браузерам, которые я тестировал (IE8, FF3.5, O10).

Полный тест HTML: 

<html>
<head>
<style>

div#header, div#chart, div#legend,
div#info1, div#info2, div#info3
{ border: 1px solid black; }

body { text-align: center; }

div { width: 500px; margin: auto; padding: 0; text-align: center; }

div#header { width: 500px; height: 50px; }
div#chart  { width: 248px; height: 250px; float: left; clear: left; }
div#legend { width: 248px; height: 202px; float: left; clear: left; }

div#info1, div#info2, div#info3
{ width: 248px; display: block; height: 150px; margin-left: 248px; }

</style>
</head>
<body>

<div>
  <div id="header">header</div>
  <div id="chart">chart</div>
  <div id="legend">legend</div>
  <div id="info1">info1</div>
  <div id="info2">info2</div>
  <div id="info3">info3</div>
</div>

</body>
</html>
4 голосов
/ 31 октября 2009

Вы используете много классных вещей, таких как float и position.

Или, если вы ищете надежную платформу, которая выполняет большую часть работы за вас, посмотрите Blueprint CSS , которая имеет несколько макетов сетки, которые вы можете найти подходящими.

Вот еще несколько ресурсов, которые могут вам пригодиться:

2 голосов
/ 31 октября 2009

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

<!-- The following shows your desired html structure -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    background: #778899;
    min-width: 720px;
    max-width: 1020px;
}
#header {
    background-color:black;
    color:white;
    height:150px;
}
#chart {
    float:left;
    height:120px;
    width:50%;
    background-color:green;
    top:150px;
}
#legend {
    float:left;
    height:230px;
    width:50%;
    background-color:yellow;
}
#info1 {
    float:right;
    height:150px;
    width:50%;
    background-color:red;
    top:150px;}
#info2 {
    float:right;        
    height:150px;
    width:50%;
    background-color:black;
    color:white;}
#info3 {
    float:right;        
    height:150px;
    width:50%;
    background-color:yellow;}
</style>
</head>
<body>
<div style="width:500px;margin-left:150px;margin-left:160px;">
  <div id="header">BLACK</div>
  <div id="chart">green</div>
  <div id="info1">red</div>
  <div id="legend">yellow</div>
  <div id="info2">black</div>
  <div id="info3">yellow</div>
</div>
</body>
</html>
2 голосов
/ 31 октября 2009

Редактировать на основе вопроса Редактировать

Видя HTML, который у вас есть, я рекомендую вложить некоторые из элементов div, чтобы получить нужный элемент управления. Хотя в приведенном ниже примере я не использую ваши конкретные идентификаторы, вложенность должна показать вам, как адаптировать то, что вы хотите, к тому месту, где вы хотите быть. (Надеюсь!)

Оригинальный ответ

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

Итак, предположения, которые я собираюсь сделать, чтобы сделать жизнь относительно простой, таковы:

  • Вам нужен всеобъемлющий заголовок
  • Вам нужен левый столбец и правый столбец
  • В правом столбце есть три отдельных элемента
  • В левой колонке есть два отдельных элемента

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

Таким образом, базовый макет, вероятно, будет выглядеть примерно так: 

<html>
    <head><!-- blah blah blah --></head>
    <body>
        <!-- the overall container -->
        <div style="width: 500px; margin-left: auto; margin-right: auto;">

            <!-- the header -->
            <div style="width: 100%; height: 100px;">
                My headery goodness here
            </div>

            <!-- the left column -->
            <div style="float: left; width: 320px;">
                <div>
                    My charty goodness here
                </div>
                <div>
                    My legendary goodness here
                </div>
            </div>

            <!-- the right column -->
            <div style="float: left; width: 180px;">
                <div>
                    Info 1
                </div>
                <div>
                    Info 2
                </div>
                <div>
                    Info 3
                </div>
            </div>
        </div>
    </body>
</html>

Вам нужно приправить размеры и добавить padding по вкусу, и если вы хотите, чтобы нижние части совпали, я рекомендую установить явные свойства height, min-height, max-height и overflow на всех div с.

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

1 голос
/ 31 октября 2009

В Safari у меня работает одна опция: 

#header {
  height: 50px;
  background-color: #000000;
}  

#chart, #legend {
  float: left;
  clear: left;
  width: 50%;
}

#chart {
  height: 150px;
  background-color: #ff33ff;
}

#legend {
  height: 75px;
  background-color: #33ffff;
}

#info1, #info2, #info3 {
  float: right;
  clear: right;
  width: 50%;
  height: 75px;
}

#info1 {
  margin-top: -150px;
  background-color: #ffff33;
}

#info2 {
  margin-top: -75px;
  background-color: #ffccff;
}

#info3 {
  background-color: #66ff66;
}

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

1 голос
/ 31 октября 2009 
<div>
  <div id="header"></div>
  <div style="float:left;width:50%;">
    <div id="chart"></div>
    <div id="legend"></div>
  </div>
  <div style="float:left;width:50%;">
    <div id="info1"></div>
    <div id="info2"></div>
    <div id="info3"></div>
  </div>
  <div style="clear:both;"></div>
</div>
1 голос
/ 31 октября 2009

http://www.amazon.com/HTML-Utopia-Designing-Without-Tables/dp/0975240277/ref=sr_1_3?ie=UTF8&s=books&qid=1256937368&sr=8-3

- хорошее место для начала с CSS.

Позвольте мне начать с правильной ноги, но лучший способ научиться этому - это , делая.

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

CSS 

#header {
   width: 100%;
   height: 100px;
}

HTML 

<div id="header"></div>
0 голосов
/ 31 октября 2009

Это работает для меня в FF, Chrome и IE8 ... не уверен в старых IE и других браузерах 

<style type="text/css">
 #container { width: 95%; height: 95%; margin: 0 auto; overflow: auto; }
 #header { height: 9%; background: #444; }
 #chart  { width: 50%; height: 70%; float: left;  background: #555; }
 #legend { width: 50%; height: 20%; float: left;  background: #666; }

 #info1  { width: 50%; height: 30%; float: right; background: #111; }
 #info2  { width: 50%; height: 30%; float: right; background: #222; }
 #info3  { width: 50%; height: 30%; float: right; background: #333; }
</style>

<div id="container">
 <div id="header">Header</div>
 <div id="chart">Chart</div>
 <div id="info1">Info 1</div>
 <div id="info2">Info 2</div>
 <div id="info3">Info 3</div>
 <div id="legend">Legend</div>
</div>

* Примечание. Мне пришлось добавить переполнение: auto в контейнер, чтобы он работал в IE.

0 голосов
/ 31 октября 2009

Как уже указывалось в другом месте, добавление дополнительных контейнерных элементов div в качестве столбцов - это путь. Хотя это может показаться непривлекательным, поскольку в вашем HTML есть логика компоновки, это принятая в настоящее время практика. И это лучше, чем использовать таблицы для разметки.

В качестве альтернативы вы можете использовать статический подход и использовать абсолютное позиционирование.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...