Question

我想实现这样的布局：

始终满足以下条件（无论浏览器宽度如何）：

Div1和Div2的高度相等（50％）
Div 3的宽度固定（50px）。
Div1应填充整个剩余宽度。
Div4具有固定高度（100px）和宽度（30px），始终位于Div3的中心（水平

和垂直）

我不想使用基于CSS3 flex的显示器，因为它在旧浏览器上不可用。我尝试使用display:inline-block，但这并没有按要求拉伸Div1。如何在不使用javascript的情况下实现此布局？非常感谢任何帮助。

Answer 1

这是我的解决方案（IE支持是IE＆gt; = 9）：

CSS：

html, body { 
    height: 100%;
}

.row {
    height: 50%;
    position: relative;
}

.half-height {
    height: 100%;
}

.red {
    background-color: red
}

.yellow {
    background-color: yellow;
    width: 50px;
    position: absolute;
    right: 0;
    top: 0;
}

.blue {
    height: 100px;
    width: 30px;
    background-color: blue;
    margin: 0px 10px; /* 50px - 30px = right & left margins */
}

.green {
    background-color: green
}

/* Use tables to vertically center the blue box */
.vertical-center {
    height: 100%;
    display: table;
}

.vertical-container {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

HTML：

<div class="row">
    <div class="red half-height"></div>
    <div class="yellow half-height">
        <div class="vertical-center">
            <div class="vertical-container">
                <div class="blue"></div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="green half-height"></div>
</div>

小提琴： http://jsfiddle.net/2jtu1rsn/1/

垂直定心技术取自这里：

https://css-tricks.com/centering-in-the-unknown/

Answer 2

绝对位置和无计算。享受更新后的plunker。

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  height: 100%;
}

.div1, .div2, .div3, .div4 {
  position: absolute;
}

.div1, .div3 {
  top: 0;
  bottom: 50%;
}

.div1 {
  right: 50px;
  left: 0;
  background: red;
}

.div2 {
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  background: green;
}

.div3 {
  right: 0;
  width: 50px;
  background: yellow;
}

.div4 {
  top: 50%;
  right: 50%;
  margin: -50px -15px 0 0;
  width: 30px;
  height: 100px;
  background: blue;
}

Answer 3

CSS3 calc()函数非常适合：

#div3 {
    float: left;
    width: 50px;
}

#div1 {
    float: left;
    width: calc(100% - 50px);
}

这里是example on CodePen。

Answer 4

您可以利用containing blocks的力量来实现您正在寻找的结构。 position:relative position:absolute position:fixed上的元素将为任何position:absolute子项形成一个新的包含块。

您可以将div4与display:inline-block，vertical-align:middle和辅助元素对齐。

请参阅下面代码中的注释，以了解每个属性在此示例中的用途。

此解决方案适用于所有主要浏览器except IE <= 7

（Demo）

＆＃13;

#wrp {
    height: 100%;           /* All of the container's height */
    position: relative;     /* Establish a containing block */
}
#wrp > #top, 
#wrp > #bottom {
    position: absolute;     /* Absolutely relative to #wrp */
    height: 50%;            /* Half of #wrp's height */
    width: 100%;            /*  All of #wrp's width  */
}
#bottom {
    bottom: 0;              /* Move the bottom half to the bottom of #wrp */
}
#top > #left, 
#top > #right {
    position: absolute;     /* Absolutely relative to #top */
    height: 100%;           /* All of #top's height */
}
#left {
    left: 0;                /* Stick #left to the left of #top */
    right: 50px;            /* Expand #left to 50px from the right of #top */
}
#right {
    right: 0;               /* Stick #right to the right of #top */
    width: 100%;            /* Make #right's width responsive */
    max-width: 50px;        /* Limit #right's width to 50px */
    padding: 10px;          /* Horizontally center the child */
    box-sizing: border-box; /* Padding included in width */
    font-size: 0;           /* Remove white-space between elements */
}
#center-helper,
#inner {
    display: inline-block;  /* vertical-align applies to inline and inline-block
                               sizing applies to inline-block but not inline */
    vertical-align: middle; /* Align #inner to the center of the helper */
    height: 100%;           /* #center-helper will always be full height
                               #inner will be responsive, see next rule */
}
#inner {
    max-height: 100px;      /* Limit height to 100px */
    width: 100%;            /* Parent width = 50px + padding (10px*2) = 30px */
    font-size: 12pt;        /* Restore font size from the previous fix */
}

/* Colours and environment */
html,body{height:100%;margin:0}#bottom{background:#00b35e}#left{background:#ff000b}#right{background:#fff900}#inner{background:#00b1f5}

＆＃13;

<div id="wrp">
    <div id="top">
        <div id="left">
        </div>
        <div id="right"> 
            <!-- IE6&7 inline-block only applies to inline elements -->
            <span id="center-helper"></span>
            <span id="inner"></span>         
        </div>
    </div>
    <div id="bottom">
    </div>
</div>

＆＃13;

Answer 5

您可以这样做：

.container {
    width: 100%;
    height: 300px;
}
.div1 {
    background: red;
    height: 50%;
}
.div2 {
    background: green;
    height: 50%;
}
.div3 {
    background: yellow;
    height: 50%;
    width: 50px;
    float: right;
}

.div4{
    height: 100px;
    width: 30px;
    background: blue;
    margin: auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

<div class="container">
    <div class="div3">
        <div class="div4"></div>
    </div>
    <div class="div1"></div>
    <div class="div2"></div>
</div>

水平拉伸div

5 个答案: