Question

我有一个 div class="content-wrapper"，它有 3 个孩子：<div class="image-wrapper">, aside and <div class="text-wrapper">。我想以这种方式显示它们

将 div 包装器放在一边和 text-wrapper 类对我来说不是解决方案。

Answer 1

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

.content-wrapper {

}

.image-wrapper, aside, .text-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper {
  width: 100%;
  height: 200px;
  border: 1px solid;
}

aside,
.text-wrapper {
  width: 50%;
  height: 100px;
  border: 1px solid;
}

aside {
  float: right;
}

<div class="content-wrapper">
  <div class="image-wrapper">Image</div>
  <aside>aside</aside>
  <div class="text-wrapper">Text</div>
</div>

Answer 2

这是最简单的解决方案。

.content-wrapper{
    height: 100%;
    width: 100%;
}

.image-wrapper{
    height: 50%;
    width: 100%;
    border: 5px solid black;
    float: left;
    box-sizing: border-box;
}
.aside-wrapper{
    height: 50%;
    width: 50%;
    border: 5px solid black;
    float: left;
    box-sizing: border-box;
}
.text-wrapper{
    height: 50%;
    width: 50%;
    border: 5px solid black;
    float: left;
    box-sizing: border-box;
}

<div class="content-wrapper">
    <div class="image-wrapper"> image </div>
    <div class="aside-wrapper"> aside </div>
    <div class="text-wrapper"> text </div>
</div>

Answer 3

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
*{
   margin:0;
   padding:0;
}
body {
  background-color: white;
  text-align: center;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}
.content-wrapper
{
   width:100%;
}
.img-wrapper
{
   height:200px;
   width:100%;
   border:1px solid #333;
}
.row
{
   width:100%;
   border:1px solid #333;
   display: flex;
}
.text-wrapper
{
   height:200px;
   width:49.79%;
   border:1px solid #333;
   display: inline-block;
   float:right;
}
aside
{
   height:200px;
   width:49.79%;
   border:1px solid #333;
   display: inline-block;
   float:left;
}
</style>
</head>
<body>

<div class="content-wrapper">
   <div class="img-wrapper">
       img
   </div>
  
    <div class="text-wrapper">
      text
    </div>
    <aside>
      aside
    </aside>
   
</div>

</body>
</html>

同一行的两个兄弟姐妹具有相同的维度

3 个答案: