头div 有四个子div

Question

开发者早上好，

我是前端开发新手。我遇到了以下问题：

我想要一个头 div，头里面有 4 个子 div。我怎样才能适应屏幕呢？（见草图）

亲切的问候

Answer 1

这里是 fiddle: https://jsfiddle.net/9Lum94me/

CSS floats, flexbox and table-cell 还有其他方法供您探索。

HTML:

<div class="container">

  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
  <div class="row">
    <div class="column">Column 3</div>
    <div class="column">Column 4</div>
  </div>

</div>

CSS:

.container{
  border: 1px solid gray;
}
.row{
  padding: 10px;
}
.row .column{
  display: inline-block;
  min-width: 45%; min-height: 150px;  border: 1px solid gray; margin: 0 4% 0 0;
}

编辑： 您将必须根据需要管理列的宽度。

Answer 2

我想你需要这个，请检查：

见Fiddle Demo

.container {
  border: 3px solid;
  float: left;
  width: 100%;
}
.custom_box {
  float: left;
  width: 100%;
}
.custom_box1 {
  border: 3px solid;
  float: left;
  margin: 2%;
  text-align: center;
  width: 35%;
}
.custom_box2 {
  border: 3px solid;
  float: left;
  margin: 2%;
  text-align: center;
  width: 55%;
}

<div class="container">
<div class="custom_box">
  <div class="custom_box1">
    <h1>1</h1>
  </div>
  <div class="custom_box2">
    <h1>2</h1>
  </div>
</div>
<div class="custom_box">
  <div class="custom_box1">
    <h1>1</h1>
  </div>
  <div class="custom_box2">
    <h1>2</h1>
  </div>
</div>
</div>

Answer 3

没有任何样式的bootstrap响应式示例...（边框除外）。

Fiddle example

.content{
  border:2px solid green;
  height:100px;
  width:92%;
  margin:20px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="border:1px solid blue;">
  <div class="col-lg-12 col-md-12 col-sm-12">
  
    <div class="row no-gutter-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="content">Header1</div>
        </div>   
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="content">Header2</div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="content">Header3</div>
        </div>   
        <div class="col-lg-6 col-md-6 col-sm-6">
          <div class="content">Header4</div>
        </div>
    </div>

  </div>
</div>

要测试响应能力，请重新调整浏览器大小 window。上面的例子在小型、中型和大型规模上都是响应式的。请运行整页的代码段。

头div 有四个子div

Head div with four sub div

html

javascript

css

frontend