проблемы компоновки css и div

У меня есть панель заголовка, которая горизонтально пересекает мою веб-страницу, которая состоит из одного тега div и трех вложенных тегов div.проблемы компоновки css и div

HTML:

<div id="top-bar"> 
    <div id="leftTop"> 
     LEFT 
    </div> 
    <div id="rightTop"> 
     RIGHT 
    </div> 
    <div id="centerTop"> 
     CENTER 
    </div> 
</div>

CSS:

#top-bar 
{ 
    margin: 0; 
    padding: 1px 4px; 
    font-size: x-small; 
    background-color: #005555; 
    font-family: Arial; 
} 
#top-bar .separator 
{ 
    padding: 0 7px; 
    border-right: 0px solid #fff; 
    border-left: 0px solid #fff; 
} 
#leftTop 
{ 
    display: inline; 
    float: left; 
} 
#rightTop 
{ 
    display: inline; 
    float: right; 
} 
#centerTop 
{ 
    color: #ffffff; 
    text-align: center; 
}

И это работает просто замечательно, за исключением того, что теги DIV находятся вне порядка в HTML код, который я не только как. Если я закажу теги div, поместив их влево, в центр и вправо, в HTML, тогда правый div просто исчезнет с веб-страницы! Я предполагаю, что это имеет какое-то отношение к атрибутам float и text-align, имеющим конфликт.

У кого-нибудь есть идеи относительно того, что здесь происходит, или есть ли более простой способ сделать это в CSS?

источник

2009-05-26 Jagd

Попробуйте float: left; на #centerTop или display: inline на всех трех без каких-либо поплавков.

источник

2009-05-26 23:12:43

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

#leftTop 
    { 
     float: left; 
    } 
    #rightTop 
    {    
     float: right; 
    } 
    #centerTop 
    { 
     float:left; 
     text-align: center; 
    }

источник

2009-05-26 23:30:25

Я просто проверял код из оригинального поста в Firefox 3.0.10, Opera 9.64, IE8 и Google Chrome 2.0.181.1

Все браузеры показали все 3 divs, ни один div не упал с экрана ... Возможно, вы используете IE6?

источник

2009-05-26 23:45:02 KdgDev

Я запускаю HTML и CSS FF 3.0.10. Когда вы перегруппируете div CENTERTOP между разделителями LEFTOP и RIGHTTOP, div RIGHTTOP не падает «с страницы», но текст «ПРАВО» просто падает на следующую строку.

Мое решение предлагается ниже (вы заметите, что у меня есть некоторые дополнения и некоторые передовые методы).

HTML КОД:

<html> 
<head> 
    <link rel="stylesheet" href="global.css"> 
</head> 
<body> 
    <div id="top-bar"> 
     <div id="leftTop"> 
       LEFT 
     </div> 
     <div id="centerTop"> 
      CENTER 
     </div> 
     <div id="rightTop"> 
       RIGHT 
     </div> 
    </div> 
    <div class="clearer"> 
    </div> 
    <div id="randomContent"> 
      RANDOM CONTENT 
    </div> 
</body>

CSS КОД:

#top-bar { 
    margin: 0; 
    font-family: Arial; 
} 

#leftTop { 
    float: left; 
    width: 20%; 
    border: 1px solid red; 
} 

#centerTop { 
    float: left; 
    width: 20%; 
    border: 1px solid blue; 
} 

#rightTop { 
    border: 1px solid green; 
} 

.clearer { 
    clear: both; 
} 

#randomContent { 
    background-color: yellow; 
}

Так вы заметите в HTML, что дивы расположены в порядке слева ЦЕНТР ПРАВО. В этом CSS это отразилось на том, что левая часть LEFTTOP и CENTRETOP оставлена. Вы также заметите, что я указал свойство ширины на LEFTTOP и CENTERTOP divs, чтобы вы могли разделить свои divs так широко, как вы хотите. (Вы сможете визуально увидеть изменения ширины, как я добавил в рамку на div). На разделителе RIGHTTOP не было применено свойство процента ширины, так как оно будет потреблять оставшиеся 60% от ширины (после того, как LEFTTOP и CENTRETOP потребляют 40%).

Я также добавил div CLEARER. Подумайте, что div CLEARER - это горизонтальный разрыв строки. По существу он действует как линия демаркаций, чтобы отделить плавающие divs от содержимого ниже.

Затем вы можете добавить любой контент, который вы хотите, в div RANDOMCONTENT.

Надеется, что это помогает :)

источник

2009-05-27 00:12:14 Lycana

Другого решения:

Установите левое верхнее, centerTop и rightTop к дисплею: настольные ячейки,
Установите топ-бар в дисплей: таблица строк,
Установите контейнер в дисплей: стол
Установите ширину контейнера и строки (# стол-бар) на 100%;
Установите ширину столбцов на требуемые коэффициенты (например, 25% для левого и правого, 50% для центра)
Значения caveat: table, table-row и table-cell css не работают IE 5.5 или 6 (и, возможно, Opera 8); но они хорошо работают во всех современных браузерах. IE условными может быть использован для разделения кода для IE> 5 и IE 7. <

TEST:

<html> 
<head> 
<title>3 Column Header Test</title> 
<style type="text/css"> 
body#abod { 
background-color:#F5ECBD; 
color:#000; 
} 
#hdrrow { 
margin:0; 
padding:0; 
width:100%; 
border:1px solid #0C5E8D; 
display:table; 
} 
#top-bar { 
margin:0; 
padding:1px 4px; 
width:100%; 
font-size:100%; 
background-color:orange;/*#005555;*/ 
font-family: Arial; 
border:1px solid #000; 
display:table-row; 
} 
#leftTop { 
margin:0; 
padding:0 16px; 
width:24%; 
text-align:left; 
color:#000; 
background-color:#F0DD80; 
border:1px dashed #f00; 
display:table-cell; 
} 
#centerTop { 
margin:0; 
padding:0 16px; 
width:40%; 
margin:0 auto; 
text-align:center; 
color:#000; 
background-color:#F5ECBD; 
border:1px dashed #f00; 
display:table-cell; 
} 
#rightTop { 
margin:0; 
padding:0 16px; 
width:24%; 
text-align:right; 
color:#000; 
background-color:/*#F0DD80;*/transparent; 
    /*shows the orange row color*/ 
border:1px dashed #f00; 
display:table-cell; 
} 
#footer { 
padding:25px; 
color:#000; 
background-color:#F5ECBD; 
} 
</style> 
</head> 
<body id="abod"> 
<div id="hdrrow"> 
    <div id="top-bar"> 
     <div id="leftTop"> 
     LEFT 
     </div> 
     <div id="centerTop"> 
     CENTER 
     </div> 
     <div id="rightTop"> 
     RIGHT 
     </div> 
    </div> 
</div> 
<h4 id="footer">Footer Lorem ipsum dolor sit amet</h4> 
</body> 
</html>

источник

2009-05-27 04:13:53

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

Другой вариант:

#top-bar 
{ 

    margin: 0; 
    padding: 1px 4px; 
    font-size: x-small; 
    background-color: #005555; 
    font-family: Arial; 
} 
#top-bar .separator 
{ 
    padding: 0 7px; 
    border-right: 0px solid #fff; 
    border-left: 0px solid #fff; 
} 
#top-bar>div 
{ 
    float: left; 
    width: 33%; 

} 
#rightTop 
{ 
    text-align: right; 
} 
#centerTop 
{ 
    color: #ffffff; 
    text-align: center; 
    width: 34%; 
}

И затем положить <br style="clear:both"/> прямо перед тем, как закрыть свой топ-бар DIV.

<div id="top-bar"> 
    <div id="leftTop"> 
     LEFT 
    </div> 
    <div id="centerTop"> 
     CENTER 
    </div> 
    <div id="rightTop"> 
     RIGHT 
    </div> 
    <br style="clear:both"/> 
</div>

Не уверен, что вы хотите, чтобы ширина была определена как это.

источник

2009-05-27 04:32:52

Относительное позиционирование поменять позиции дивы после того, как они были размещены:

HTML-

<div id="top-bar"> 
    <div id="leftTop"> 
     LEFT 
    </div> 
    <div id="centerTop"> 
     CENTER 
    </div> 
    <div id="rightTop"> 
     RIGHT 
    </div> 
</div>

CSS-

#leftTop { 
    width:33%; 
    float:left; 
} 
#centerTop { 
    width:33%; 
    float:right; 
    position:relative; 
    right:33%; 
} 
#rightTop { 
    width:33%; 
    float:right; 
    position:relative; 
    left:33%; 
}

Я использую тот же в моем Perfect Liquid Layouts, чтобы изменить column source ordering.

источник

2009-05-27 05:09:37

проблемы компоновки css и div

ответ

Смежные вопросы