CSS float не работает должным образом

Я пытаюсь получить действительно базовый макет, используя только CSS и div. То, что я хотел бы сделать, это иметь 3 больших div в одной строке и небольшой div ниже первого div первого div в строке. Поскольку я пытаюсь установить для всех из них высоту 400 пикселей, кроме первой и маленькой, которые имеют высоту 300 пикселей и 100 пикселей, я бы ожидал, что они будут показывать все на одной и той же строке, большой блок. Что я получаю вместо этого следующее: problem in my layout CSS float не работает должным образом

Это мой CSS:

body { 
    background-color:white; 
    } 
header { 
     background-color:black; 
     color:red; 
     height:10%; 
     width:100%; 
     padding:1px; 
     font-family:verdana; 
     } 
nav  { 
     background-color:#eeeeee; 
     text-align:center; 
     height:300px; 
     width:10%; 
     float:left; 
     overflow:hidden; 
     } 
article { 
     height:100px; 
     clear:left; 
     width:10%; 
     background-color:blue; 
     overflow:hidden; 
    } 
section { 
     background-color:yellow; 
     height:400px; 
     width:50%; 
     float:left; 
     font-style:italic; 
     overflow:hidden; 
      } 
aside { 
     background-color:red; 
     float:left; 
     width:40%; 
     height:400px; 
     overflow:hidden; 
    } 
footer {  
     background-color:black; 
     padding:5px; 
     text-align:center; 
     color:white; 
     clear:both; 
    } 
aside img 
    { 
     max-width:100%; 
     max-height:100%; 
     margin:0 auto; 
     display:block; 
    }

И это мой HTML:

<body> 
<header> 
    <h1 align="center"> Welcome to the official website of Almost Free Furniture</h1> 
</header> 

<nav> 
    <p> <a href="catalog.html">Products</a> </p> 
</nav> 

<article> 
    <p>Hi</p> 
</article> 

<section> 
    <p>Please excuse us while we build our new website.</p> 
    <p>In this provisional version you will still able to navigate to our catalogue and see our products.</p> 
</section> 

<aside id="aside"> 
</aside> 

<footer> 
    This is a work in progress.<br> 
    Copyright AlmostFreeFurniture. 
</footer>

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

источник

2015-03-11 Luca Giorgi

Изменение 'ясно: left' в' поплавка: left' для 'article'? Не совсем уверен, что я понимаю, что вам нравится, вы хотите, чтобы все divs, включая nav, были в одной строке? – Cyclonecode

@Cyclone Уже пробовал, делает синюю коробку плавающей справа от серой коробки, а желтая коробка плавает справа от синего. Редактировать: То, что я хотел бы иметь, - это все div в одной строке, с синим под серым, но все еще слева от желтого. –

Удалите 'float: left' из серого квадрата и измените стиль для «статьи», как я сказал выше. – Cyclonecode

я бы исправить это обертывание nav и article элементов в виде отдельного элемента:

.left-column { 
    width: 10%; 
    float:left; 
} 
nav { 
    background-color:#eee; 
    text-align:center; 
    height:300px; 
    width:100%; 
    overflow:hidden; 
} 
article { 
    height:100px; 
    width:100%; 
    background-color:blue; 
    overflow:hidden; 
}

Разметка будет затем стать, как это:

<div class="left-column"> 
    <nav> 
    <p> <a href="catalog.html">Products</a> </p> 
    </nav> 
    <article> 
    <p>Hi</p> 
    </article> 
</div>

источник

2015-03-11 23:19:58 Cyclonecode

@LucaGiorgi - Добро пожаловать, рад, что смогу помочь. – Cyclonecode

Почему бы не поставить родитель вокруг ваших три elemtns и дать ему display: inline-block;?

Вот в Codepen для примера способ, чтобы решить вашу проблему: LINK TO CODEPEN

Вот код тоже, если вы предпочитаете смотреть здесь:

HTML

Добро пожаловать на официальный сайт почти бесплатной мебели

<div class="inline-div"> <!-- These are the inline-block wrappers --> 

    <nav> 
     <p> <a href="catalog.html">Products</a> </p> 
    </nav> 

    <article> 
     <p>Hi</p> 
    </article> 

    </div> 

    <div class="inline-div"> <!-- These are the inline-block wrappers --> 

    <section> 
     <p>Please excuse us while we build our new website.</p> 
     <p>In this provisional version you will still able to navigate to our catalogue and see our products.</p> 
    </section> 

    </div> 


    <div class="inline-div"> <!-- These are the inline-block wrappers --> 

    <aside id="aside">ANOTHER</aside> 

    </div> 

<footer> 
    This is a work in progress.<br> 
    Copyright AlmostFreeFurniture. 
</footer>

CSS

header { 
    background-color:black; 
    color:red; 
    height:10%; width:100%; 
    padding:1px; 
    font-family:verdana; 
} 
nav { 
    background-color:#eeeeee; 
    text-align:center; 
    height:300px; 
    overflow:hidden; 
} 
article { 
    height:100px; 
    background-color:blue; 
    overflow:hidden; 
} 
section { 
    background-color:yellow; 
    height:400px; 
    font-style:italic; 
    overflow:hidden; 
      } 
aside { 
    background-color:red; 
    height:400px; 
    overflow:hidden; 
} 
footer {  
    background-color:black; 
    padding:5px; 
    text-align:center; 
    color:white; 
} 
aside img { 
    max-width:100%; max-height:100%; 
    margin:0 auto; 
    display:block; 
} 

.inline-div { display: inline-block; width: 33%; }

источник

2015-03-11 23:28:06

CSS float не работает должным образом

ответ

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