Question

我正在尝试实现此布局黑色细线显示外部div的边框。里面有两个div（红色和蓝色）。我想把它们放在一起，两者之间有一点空间。此外，红色div的顶部/底部和蓝色div的顶部/底部应相等。左右也应该是平等的。无论浏览器的大小如何，这都应该是相同的。

我尝试过玩边缘但是我不能这样做，所以它完全相同。这是我尝试的完整code的链接。

以下是我的代码片段：

#about {
   background-color: #D1C9BE;
   border-style: solid;
   border-color: black;
   position: relative;
}

#aboutImage {
   border-style: dotted;
   border-color: white;
   background-color: red;

   height: 150px;
   width: 150px;
   margin-top: 200px;
}

#aboutInfo {
  border-style: dotted;
  border-color: white;
  background-color: blue;

  width: 300px;
  height: 400px;
  font-size: 35px;
  text-align: right;

  margin-left: 20px;

}

还有一种方法可以根据文本中的文本大小自动调整div的大小吗？我已经看到两个相同大小的div的解决方案并排放置，但是我如何使用两个不同大小的div？

Answer 1

使用flex-box。另外，不要将柔性盒和传统定位风格混合在一起。您可以使用display: flex和justify-content: space-evenly;以及align-items: center;

完成所需操作

＆＃13;

body {
	margin: 0;
}

html, body {
    height:100%;
}

/* FULLPAGE */
.section {
    height: 100vh;
	  display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* ABOUT */
#about {
	background-color: #D1C9BE;
}

#aboutImage {
	border-color: white;
	background-color: red;
	height: 150px;
	width: 150px;
}

#aboutInfo {
	border-color: white;
	background-color: blue;
	font-size: 35px;
}

#aboutInfo p {
	font-size: 15px;
}

＆＃13;

<html>
  <body>
  <section id="about" class="section">
			<!-- Picture -->
			<div id="aboutImage"></div>
			
			<!-- Description -->
			<div id = "aboutInfo">
				Lorem Ipsum.
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Suspendisse malesuada lacus commodo enim varius, <br> non gravida ipsum faucibus. Vivamus pretium pulvinar <br> elementum. In vehicula ut elit vitae dapibus. Cras ipsum <br> neque,  finibus id mattis vehicula, rhoncus in mauris. In <br> hendrerit vitae velit vel consequat. Duis eleifend dui vel <br> tempor maximus. Aliquam rutrum id dolor vel ullamcorper. <br> Nunc cursus sapien a ex porta dictum.
        </p>
				
			</div> 
			
		</section>
    
  </body>
<html>

＆＃13;

Answer 2

你可以使用flex。对于父容器，键入它

.container { 
    display: flex; 
    flex-direction:row; 
    align-items: center; 
}

Answer 3

您可以使用flexbox。它会帮助您横向（justify-content）和垂直（align-items）使您的元素在它们周围具有相等的空间（justify-content: space-evenly）。在这种情况下，您的子元素不需要任何额外的样式。

#about {
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  padding: 20px;

  background-color: #D1C9BE;
  border-style: solid;
  border-color: black;
}

#aboutImage {
   border-style: dotted;
   border-color: white;
   background-color: red;

   height: 150px;
   width: 150px;
}

#aboutInfo {
  border-style: dotted;
  border-color: white;
  background-color: blue;

  width: 300px;
  height: 400px;
  font-size: 35px;
  text-align: right;
}

至于你的上一个问题是自动调整大小的div，如果省略height属性，这实际上是默认值。然后，div将与您的文本行数一样高（假设您保持width设置）。

如何在另一个div中手动定位多个div

3 个答案: