Question

我想实现以下结构。

http://s15.postimg.org/aeno9dpmz/screen_shot.jpg

到目前为止我所做的是this。

我试图设置宽度为%的中间div和width: 300px中间div的两个div，所有三个div都有float:left

我面临的问题是

右侧空间用于大屏幕
最后一个div掉进小屏幕。

我只想<div>而不是<table>

Answer 1

你需要在右侧和左侧div中添加更多div 并将外部div设置为width: 50%;

并将中间内容保留在margin: 0 auto的中心位置并以负余量将其拉下来

Here is the code for it.

Answer 2

保持规则百分比似乎对我有用：

.midCnt {
  width: 36%;
  background: #fff;
  padding: 2%;
  border: 1px solid #ccc;
  min-height: 80px;
  box-sizing:border-box;
}

UPDATED CODE

这就是你要找的东西吗？

Answer 3

通过使用CSS3 Flex method，您可以实现理想的结果。请先参阅 DEMO 。

HTML代码就是这样。

<div class="flex">
    <div>uno</div>
    <div>due</div>
    <div>tre</div>
  </div>

CSS代码在这里

.flex
   {
      /* basic styling */
      width: 100%;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;
      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;
justify-content: center;
      display: flex;
      flex-direction: row;
   }
   .flex > div
   {
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
      width: 30px; 
   }

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

需要将2个不同的div拉伸到屏幕，中间有一个div

3 个答案: