css div расположение с использованием float и width

Я очень новичок в HTML и CSS, но, пожалуйста, расскажите мне обо мне. То, что я пытаюсь достичь, - 1-й div будет идти до конца экрана, который в порядке, но когда я пытаюсь сделать, что 3 divs разделяют один и тот же ряд бок о бок друг с другом, Я пытаюсь установить 3 из них с поплавком и сделать их ширину 33%. Случается, что только 2 из div разделят одну и ту же строку, а третий div будет ниже двух разделов. Они выравниваются только тогда, когда я устанавливаю ширину и плаваю в каждом div, я пробовал применять float и ширину с 3 раза, но это не сработает, я где-то испортил, и я немного смущен поведением div.css div расположение с использованием float и width

Вот мой HTML:

<!DOCTYPE html> 
    <html> 
    <head> 
     <title> 
     practice webpage 
     </title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 

    <body> 
     <div class="container"> 
      <div class="banner"> 
      contents 
      </div> 
      <div class="menu1">i am menu 1</div> 
      <div class="menu2">i am menu 2</div> 
      <div class="menu3">i am menu 3</div> 
     </div> 
    </body> 
</html>

CSS:

*{ 
padding: 0; 
margin: 0; 
box-sizing: border-box; 
} 

.banner{ 
background-color: aqua; 
} 

.menu1, menu2, menu3 { 
float: left; 
width: 33%; 
} 

.menu1{ 
background-color: crimson; 
} 

.menu2{ 
background-color: blueviolet; 
} 

.menu3{ 
background-color: darkorange; 
}

источник

2017-01-05 smiling

Опечатка. Это должно быть '.menu1, .menu2, .menu3' –

, вам не хватает '.' перед вашими классами в .menu1, menu2, menu3 {'должно быть' .menu1, .menu2, .menu3 {' –

Вы должны добавить точек на классы при написании CSS.

Здесь обновить код:

.menu1, 
.menu2, 
.menu3 { 
    float: left; 
    width: 33%; 
}

Проверить обновленный скрипку: https://jsfiddle.net/nashcheez/0qg1hhcj/

Я думаю, это то, что вы хотите:

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
} 
 
.banner { 
 
    background-color: aqua; 
 
} 
 
.menu1, 
 
.menu2, 
 
.menu3 { 
 
    float: left; 
 
    width: 33%; 
 
} 
 
.menu1 { 
 
    background-color: crimson; 
 
} 
 
.menu2 { 
 
    background-color: blueviolet; 
 
} 
 
.menu3 { 
 
    background-color: darkorange; 
 
}

<div class="container"> 
 
    <div class="banner"> 
 
    contents 
 
    </div> 
 
    <div class="menu1">i am menu 1</div> 
 
    <div class="menu2">i am menu 2</div> 
 
    <div class="menu3">i am menu 3</div> 
 
</div>

источник

2017-01-05 09:24:40 nashcheez

Это происходит потому, что в css вы написали .menu1, menu2, and menu3 вместо .menu1, .menu2, .menu3. См. Это example.

источник

2017-01-05 09:25:55

css div расположение с использованием float и width

ответ

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