HTML/CSS DIV не подобает в DIV

У меня есть проблема с CSS и HTML, я не могу понять, почему это происходитHTML/CSS DIV не подобает в DIV

HTML:

<body> 
    <div id="header"> 
    <div id="header_conteiner"> 
     <div id="logo_container"> 
     <img src="images/logo.png" /> 
     </div> 
     <input type="text" id="txtSearch" class="text_input" /> 
    </div> 
    </div> 
</body>

CSS:

body{ 
    background:#787777; 
    font-family:"Droid Sans",Helvetica,Arial,Sans-Serif; 
    font-size:0.81em; 
    margin: 0px; 
    padding: 0px; 
} 

#header{ 
    height:100px; 
    background:#000000; 
    width:100%; 
    margin:0px; 
    border:0px solid #6F3; 
} 

#header_conteiner{ 
    width:1000px; 
    height:100px; 
    border:1px solid #9F0; 
    margin:0 auto; 
} 

#logo_container{ 
    padding-top:3px; 
    width:237px; 
    height:100px; 
    border:1px solid #03F; 
} 

#txtSearch{ 
    width:220px; 
    height:20px; float:right; 
}

Вот результат: enter image description here

как вы видите на картинке входной текст из header_conteiner может кто-нибудь мне что-нибудь посоветует?

источник

2012-01-29 Irakli Lekishvili

Добавьте к этому #header_conteiner:

float: left; 
    clear: both;

Так результат:

#header_conteiner{ 
    width:1000px; 
    height:100px; 
    border:1px solid #9F0; 
    margin:0 auto; 
    float: left; 
    clear: both; 
}

источник

2012-01-29 19:53:05 OrangeTux

Переместить вход до контейнер с логотипом.

источник

2012-01-29 19:44:33 Czechnology

Спасибо, что вы сработали, но до сих пор не можете понять, почему html работает таким образом –

Поскольку элемент ввода фактически находится под контейнером логотипа, а затем вы говорите ему плавать вправо. Если вы сначала вводите ввод, тогда он будет плавать вправо, не занимая пространство для контейнера с логотипом, которое может остаться. – Czechnology

Проще говоря, если вы хотите, чтобы дополнительные элементы блока располагались рядом друг с другом, плавающие элементы должны идти первыми. Любые плавающие элементы, помещенные _after_ неплавающий элемент, будут помещены под ним. – Czechnology

logo_container - это элемент div, элемент блока. Это означает, что он занимает горизонтальное пространство в контейнере; следующий элемент HTML будет вынужден под ним. Поскольку для параметра logo_container установлено значение 100px, то же самое, что и header_conteiner, для вашего поля ввода нет вертикального пространства. Он вытесняется ниже logo_container.

Чтобы устранить проблему, вы можете сделать logo_container встроенным элементом и поплавать влево. Встроенные элементы могут располагаться рядом друг с другом, в то время как элементам блок-линии требуется собственное горизонтальное пространство.

CSS свойство отображения: http://www.w3schools.com/cssref/pr_class_display.asp

источник

2012-01-29 19:45:38 IsisCode

это выглядит как logo_container имеет отступы сверху 3px

источник

2012-01-29 19:46:07

HTML/CSS DIV не подобает в DIV

ответ

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