Question

我的输出错误。

代码：

<!DOCTYPE html>
<html>
<head>
   <style>
     .largebox { display: block; margin: 10px; border: 3px solid #73AD21; }
     .box1 { display:inline-block; width:20%; height:200px; border:2px solid red; }
     .box2 { display:inline-block; width:78%; height:100px; border:2px solid red; }
     .col1 { display:inline-block; border:2px solid red; }
   </style>
</head>
<body>
   <div class="largebox"> <div class="box1">
      <div class="leftbox"></div>
   </div>
   <div class="box2">
      <div class="col1">float</div>
   </div>
</body>
</html>

Answer 1

您可以使用Flexbox创建此布局。

＆＃13;

.largebox, .bottom, .box1 {
  display: flex;
  flex: 1;
}
.box2 {
  flex: 3;
}
.box {
  border: 1px solid black;
  margin: 10px;
  padding: 25px;
  flex: 1;
}

＆＃13;

<div class="largebox">
  <div class="box1">
    <div class="box">Div</div>
  </div>
  <div class="box2">
    <div class="box">Div</div>
    <div class="bottom">
      <div class="box">Div</div>
      <div class="box">Div</div>
      <div class="box">Div</div>
    </div>
  </div>
</div>

＆＃13;

这就是你可以用inline-block创建相同的布局，注意容器上的高度是固定的。

＆＃13;

* {
  box-sizing: border-box;
}
.largebox {
  height: 300px;
}
.bottom, .box1, .box2 {
  display: inline-block;
  vertical-align: top;
}
.box1 {
  width: calc(30% - 10px);
  height: 100%;
}
.box2 {
  width: calc(70% - 10px);
  height: 100%;
  margin-left: 5px;
}
.box {
  border: 1px solid black;
  margin: 10px;
  padding: 25px;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.box2 > .box {
  height: 50%;
  margin-bottom: 0;
  width: calc(100% - 10px);
}
.bottom {
  width: 100%;
  height: 50%;
  padding-bottom: 10px;
}
.bottom > .box {
  width: calc(33.334% - 10px);
  margin-right: 0;
}

＆＃13;

<div class="largebox">
  <div class="box1">
    <div class="box">Div</div>
  </div>
  <div class="box2">
    <div class="box">Div</div>
    <div class="bottom">
      <div class="box">Div</div><div class="box">Div</div><div class="box">Div</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我考虑尝试使用CSS属性flex：https://developer.mozilla.org/en/docs/Web/CSS/flex

或使用一些网格模板系统，例如Bootstrap https://getbootstrap.com/examples/grid/

如何使用＆＃34; display：inline-block或block或inline＆＃34;来创建此布局样式表中的属性？

2 个答案: