HTML - 保持内联块元素不会下降

时间：2015-05-16 23:55:58

标签： html css

我正在努力制作这个布局......

layout

我已经完成了所有内容，但是当我调整浏览器窗口大小时，不同的框正在下降。我希望他们留在原地和规模。

我正在尝试使用display：inline-block。

<body>
<header>header</header>
<article>
    <div class="col_left">
        <div class="col_left_top margin_18bot">img</div>
        <div class="col_left_bot">box1</div>
        <div class="col_left_bot margin_18left_18bot">box2</div>
    </div>
    <div class="col_right margin_18left_18bot">box3</div>
</article>


 html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
.margin_18left_18bot {
    margin: 0px 0px 18px 18px;
}
.margin_18bot {
    margin: 0px 0px 18px 0px;
}
body {
    max-width: 1080px;
    min-width: 850px;
    margin: auto;
}
header {
    background-color: brown;
    height: 153px;
}
article {
    padding: 18px;
}
.col_left {
    float: left;
    width: 66.3%;
    max-width: 690px;
}
.col_left_top {
    width: 100%;
    height: 600px;
    max-height: 600px;
    max-width: 690px;
    background-color: aqua;
}
.col_left_bot {
    display: inline-block;
    vertical-align: top;
    width: 48.697912%;
    background-color: aquamarine;
    min-height: 300px;
    max-width: 336px;
}
.col_right {
    display: inline-block;
    width: 32.1854%;
    background-color: red;
    height: 1070px;
    max-width: 336px;
}

这是fiddle .... *固定的小提琴在

之前没有正确显示

1 个答案:

答案 0 :(得分：0)

您遇到的问题是因为您将width设置为百分比，但您在px中定义了这些边距，最终不会有width {当你缩小时{1}}

要解决此问题，您必须执行以下操作：

更改此内容： 

100%

要 

.col_left {
    float: left;
    width: 66.3%; 
    max-width: 690px;
}

.col_right {
    display: inline-block;
    width: 32.1854%;
    background-color: red;
    height: 1070px;
    max-width: 336px;
}

我使用的原因：

.col_left {
    float: left;
    width: calc(67% - 9px); 
    max-width: 690px;
}

.col_right {
    display: inline-block;
    width: calc(33% - 9px);
    background-color: red;
    height: 1070px;
    max-width: 336px;
}

是因为calc(33% - 9px); and width: calc(67% - 9px); 是margin-left所以我们必须将它除以2。

另外，在执行18px时请注意，如果您像下面那样格式化结构，则由于换行符，它们之间会有空格：

inline-block

要解决此问题，请删除换行符。它会变得丑陋，但它会发挥作用

<div class="col_left_bot">box1</div>
<div class="col_left_bot margin_18left_18bot">box2</div>

更新，对<div class="col_left_bot">box1</div><div class="col_left_bot margin_18left_18bot">box2</div> 上的问题进行进一步说明，并将保证金设置为percentage

假设您在2个元素上有px容器和100px宽度且49%页边距。

让我们计算：

2px

但如果容器缩小到50px怎么办？

计算：

100 * .49 x 2 + 2 = 100 // correct for this scale

当容器缩小时，这就是你的其他元素失效的原因。

Fiddle

相关问题
最新问题