Question

我想创建具有两个元素的容器，图中给出了颜色。这两个是不同的div，必须并排。我该怎么做？

这是我的代码：

<html>
	<head>
		<title>Testing</title>
		<style>
		 .container{
		 	width: 50%;
		 	height: 50%;
		 }
		 .sidenav{
		 	width: 25%;
		 	height: 100%;
		 	background-color: black;
		 }
		 .bgrnd{
		 	width: 75%;
		 	height: 100%;
		 	background-color: blue;
		 	float: left;
		 }
		</style>
	</head>
	<body>
		<div class="container">
			<div class="sidenav">
			</div>
			<div class="bgrnd">
			</div>
		</div>
	</body>
</html>

Answer 1

您没有在文档正文上设置高度，因此在div上设置百分比将不会执行任何操作。你还需要浮动sidenav div。

.container {
  width: 50%;
  height: 50%;
}

.sidenav {
  width: 25%;
  height: 100%;
  background-color: black;
  float: left
}

.bgrnd {
  width: 75%;
  height: 100%;
  background-color: blue;
  float: left;
}

html,
body {
  height: 100%;
}

<div class="container">
  <div class="sidenav">
  </div>
  <div class="bgrnd">
  </div>
</div>

Answer 2

您的代码已更新！

    body, html{ 
      padding:0px; 
      margin:0px; 
      height:100%;
    }

    .container{
      width: 50%;
	  height: 50%;
    }
		
    .sidenav{
	  width: 25%;
	  height: 100%;
	  background-color: black;
	  float: left;
     }
     
	.bgrnd{
	  width: 75%;
	  height: 100%;
	  background-color: blue;
      float: left;
	}

<div class="container">
  <div class="sidenav"></div>
  <div class="bgrnd"></div>
</div>

Answer 3

您可以将.sidenav和.bgrnd设置为position: absolute;，然后从那里进行相应的定位。此外，您已将.container设置为：width: 50%;和height: 50%;，我认为您不需要。

.container {
  height: 100%;
  width: 100%;
}
.sidenav {
  width: 25%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: black;
}
.bgrnd {
  width: 75%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 25%;
  background-color: blue;
}

<!DOCTYPE html>
<html>
<head>
  <title>Testing</title>
</head>
<body>
  <div class="container">
    <div class="sidenav"></div>
    <div class="bgrnd"></div>
  </div>
</body>
</html>

Answer 4

如何使用css-flex。

#main {
width: 100%;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
.div1 {
width: 25%;
height: 50px;
}
.div2 {
width: 75%;
height: 50px;
}
<div id="main">
  <div class="div1" style="background-color:coral;">A</div>
  <div class="div2" style="background-color:lightblue;">B</div>
</div>

Answer 5

How about this:

<div class="container">
   <div class="sidenav">
      test
   </div>
   <div class="bgrnd">
      test
   </div>
</div>

CSS:

.container {
    width: 50%;
    height: 50%;
}
.sidenav {
    width: 25%;
    height: 100%;
    background-color: black;
    color: #fff;
    float: left;
}
.bgrnd {
    width: 75%;
    height: 100%;
    background-color: blue;
    color: #fff;
    float: right;
}

如何将divs并排放在容器中？

5 个答案: