Question

我想把我的div放在中间位置，如下图所示。

enter image description here

容器是屏幕的一半。

<div id="continer"  style="width:50%; height:50%; display:inline-block; ">

  <div id="group" style=" width:100%; height:30%; display:inline-block; ">
    <div id="right"  style="display: table-cell;"></div>
    <div id="left"  style="display: table-cell;"></div>
  </div>

  <div id="group" style=" width:100%; height:30%; display:inline-block; ">
    <div id="right"  style="display: table-cell;"></div>
    <div id="left"  style="display: table-cell;"></div>
  </div>

  <div id="group" style=" width:100%; height:30%; display:inline-block; ">
    <div id="right"  style="display: table-cell;"></div>
    <div id="left"  style="display: table-cell;"></div>
  </div>

</div>

Answer 1

你可以这样做：

.main{
  background-color:red;
  padding:10px;
  display:flex;
  flex-direction:column;
}

.sub{
  background-color:green;
  padding:10px;
  display:flex;
  flex-direction:row;
  justify-content:space-around;
  margin:10px 0;
}

.inner{
  background-color:yellow;
  padding:10px;
  margin:10px;
}

.inner:nth-child(1){
  flex-grow:1;
}

.inner:nth-child(2){
  flex-grow:3;
}

<div class="main">
  <div class="sub">
    <div class="inner">
    
    </div>
    <div class="inner">
    
    </div>
  </div>
  <div class="sub">
    <div class="inner">
    
    </div>
    <div class="inner">
    
    </div>
  </div>
  <div class="sub">
    <div class="inner">
    
    </div>
    <div class="inner">
    
    </div>
  </div>
</div>

Answer 2

使用bootstrap非常简单，请检查此脚本。它也会响应：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<html>

<head>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>


<body>

  <div class="container" style="padding-top:50px;">

    <h4>
      bootstrap grid view/ column example
    </h4>


    <div class="row" style="border: 1px solid black;  padding:10px;">
      <div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">

        this column is 4/12 wide
      </div>
      <div class="col-lg-1 col-md-1 col-sm-1">

      </div>
      <div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">

        this column is 7/12 wide
      </div>
    </div>


    <div class="row" style="border: 1px solid black;  padding:10px;">
      <div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">

        this column is 4/12 wide
      </div>
      <div class="col-lg-1 col-md-1 col-sm-1">

      </div>
      <div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">

        this column is 7/12 wide
      </div>
    </div>


    <div class="row" style="border: 1px solid black;  padding:10px;">
      <div class="col-lg-4 col-md-4 col-sm-4" style="border: 1px solid black;">

        this column is 4/12 wide
      </div>
      <div class="col-lg-1 col-md-1 col-sm-1">

      </div>
      <div class="col-lg-7 col-md-7 col-sm-7" style="border: 1px solid red;">

        this column is 7/12 wide
      </div>
    </div>



  </div>
</body>

</html>

Answer 3

这是一个类似于您的代码的示例：

＆＃13;

div
{
   border: 1px solid black;
   padding: 5px;
   border-spacing: 5px;
}

＆＃13;

<div style="width:50%;display:table">

<div style="display:table-row">
  <div style="width:30%; display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div>

<div style="display:table-row">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div>

<div style="display:table-row">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
</div>

</div>

＆＃13;

将div分成另一个而不会相互脱落

3 个答案: