Question

所以我必须制作一个看起来像这样的网站模板 that 但是我有浮动div的问题。我必须像三个div 1：“全局” div，在我链接的上图上称为1 2：这只是一个菜单 3：是div，它应该通过单击菜单文章来显示一些文本

目前，我的模板看起来像that。我该如何在同一行中设置两个div（红色和黄色一个）？

body {
  background-color: green;
}

#baner {
  background-color: black;
  height: 500px;
  width: 100%;
}

#menu {
  background-color: red;
  width: 40%;
  height: 30%;
}

#zawartosc {
  background-color: yellow;
  width: 60%;
  height: 70px;
  float: right;
}

<div id="baner">
  <img src="baner.jpg" width="30%" height="60%" />

  <div id="menu">
    MENU</br>
    Opis</br>
    Jaka to liczba?</br>
    Liczby całkowite z wykresu
  </div>
  <div id="zawartosc">asd</div>
</div>

Answer 1

我建议一个家长部门。

body{
    background-color:green;
}
#baner{
    background-color:black;
    height:500px;
    width:100%;
}

.bottom{
  width:100%;
  position:relatvie;
}

#menu{
    background-color:red;
    width:40%;
    height:30%;
    float:left;

}
#zawartosc{
    background-color:yellow;
    width:60%;
    height:70px;
    float:left;
}

<!DOCTYPE HTML>
<html>
<body>

  <div id="baner">
  <img src = "baner.jpg" width="30%" height="60%"/>

  <div class="bottom">
    <div id="menu">
      MENU</br>
      Opis</br>
      Jaka to liczba?</br>
      Liczby całkowite z wykresu
    </div>
   
    <div id="zawartosc">asd</div>
    
    </div>

  </div>
  
</body>
</html>

Answer 2

.main{
width:100%;
height:100px;
background-color:black;
color:white;
text-align:center;
}
.left{
width:50%;
height:50px;
background-color:green;
float:left;text-align:center;
}
.right{
width:50%;
height:50px;
background-color:red;
float:left;
text-align:center;
}

<div class="main">hello</div>
<div class="left">green</div>
<div class="right">red</div>

对于下一个div，您应该使用clear:both

清除浮点数

Answer 3

如果仅浮动#zawartosc，则它将开始换行，因为在此之前有一个块级元素（#menu），它将占据整个可用宽度。因此，如果要同时将#menu和#zawartosc div都浮动。请注意，img元素是内联元素。因此，如果您不使用浮动元素的包装，则必须将img元素设置为显示块

body{
    background-color:green;
}
#baner{
    background-color:black;
    height:500px;
    width:100%;
}
#menu{
    background-color:red;
    width:40%;
    height:30%;

}
#zawartosc{
    background-color:yellow;
    width:60%;
    height:70px;
}
#menu,#zawartosc {
	float:left;
	
} 
img {
	display:block;
}

<!DOCTYPE HTML>
<html>
<head>

<link rel="Stylesheet" type="text/css" href="test.css"/>
</head>
<body>

<div id = "baner">
<img src = "baner.jpg" width="30%" height="60%"/>

<div id = "menu">
 MENU</br>
 Opis</br>
 Jaka to lic
 zba?</br>
 Liczby całkowite z wykresu
</div>
<div id = "zawartosc">asd</div>
</div>
</body>
</html>

如果使用包装器div，则不要将img元素设置为显示块。像这样

body{
    background-color:green;
}
#baner{
    background-color:black;
    height:500px;
    width:100%;
}
#menu{
    background-color:red;
    width:40%;
    height:30%;

}
#zawartosc{
    background-color:yellow;
    width:60%;
    height:70px;
}
#menu,#zawartosc {
	float:left;
	
}

<!DOCTYPE HTML>
<html>
<head>

<link rel="Stylesheet" type="text/css" href="test.css"/>
</head>
<body>

<div id = "baner">
<img src = "baner.jpg" width="30%" height="60%"/>

<div class = 'wrapper'>
  <div id = "menu">
 MENU</br>
 Opis</br>
 Jaka to lic
 zba?</br>
 Liczby całkowite z wykresu
</div>
<div id = "zawartosc">asd</div>
</div>
</div>
</body>
</html>

希望这会对您有所帮助。

Answer 4

Css不再使用浮标将事物左右定位（加上浮标仅设计用于在文本中定位图像，但由于缺乏更好的定位方法而被滥用）

我将使用flexbox而不是浮动div，这还有一个附加的好处，即您的左右div的高度将相等：

body {
  background-color: green;
}

#baner {
  background-color: black;
  height: 500px;
  width: 100%;
  
  display:flex; /* this is optional, but I added it to make the container below fill the vertical space */
  flex-direction:column; /* aligns children in a column */
}

.container {
  display:flex;  /* add this so menu and zawartosc are aligned in a row - default flex direction is row */
  flex-grow:1;   /* this just says fill the resat of the space - in this case the vertical space of baner */
}


#menu {
  background-color: red;
  width: 40%;   /* this can be a fixed width if you want - menus don't usually grow in size so best to make the content column fluid rather than both content and menu */
}

#zawartosc {
  background-color: yellow;
  flex-grow: 1;  /* make this grow to fill the rest of the row */
}

<div id="baner">
  <img src="baner.jpg" width="30%" height="60%" />

  <div class="container"> <!-- wrap below divs in a container -->
    <div id="menu">
      MENU</br>
      Opis</br>
      Jaka to liczba?</br>
      Liczby całkowite z wykresu
    </div>
    <div id="zawartosc">asd</div>
  </div>
</div>

More information about flexbox

Useful Flexbox playground Codepen

如果您想继续使用浮点数，则要么必须向左浮选菜单，要么将zawartosc移到html中的菜单之前-但也不要忘记清除浮点数（可能是为什么要在其中添加固定高度横幅）

我无法正确浮动div

4 个答案: