0

我的代码标题有问题。标题分为 3 个不同的列，其中两个当前填充有文本和图像。（中心尚未填充）。

我注意到，当我减小浏览器的大小（放大、缩小）时，两个标题列开始脱离内容。右列保持固定到下面的内容，因为它填充了文本，但是中心列和填充较少的左列开始分离。

是否可以强制我的 3 列标题保持连接到下面的内容？我担心如果有人在大屏幕或视网膜显示器上查看该网站，它会脱离。

原始大小的屏幕截图

浏览器被强制缩小时的屏幕截图

<div class="col span_1_of_3 a">
<div class="col span_1_of_3 b">
<div class="col span_1_of_3 c">

CSS如下：

.span_3_of_3 {
width: 100%;

}

/* line 28, ../sass/test.scss */
.span_2_of_3 {
width: 66.1%;
height:100%;
}

/* line 32, ../sass/test.scss */
.span_1_of_3 {
width: 33.32%%;
height:100%;

}
4

3 回答 3

1

将 div 包装在父 div 中。然后浮动孩子并给他们一个相对宽度。

<div class="header">
    <div class="col span_1_of_3 a">
    <div class="col span_1_of_3 b">
    <div class="col span_1_of_3 c">
</div>

CSS：

.header { width:100%; overflow:auto; }
.col { float:left; width:30% }
于 2013-04-01T22:23:17.210 回答
0

You can use display: table-cell on each .col and display: table on parent (*). That will force your "cells" to have the same height and stay on the same row.
Though I wonder how you managed your witdths? Is it in percentage or em? You didn't include any CSS so it's impossible to figure.

(*) Add table-layout: fixed on this same parent if you want precise widths to be applied, otherwise the browser will also adapt to the content of each "cell".

于 2013-04-01T22:15:13.053 回答
0

Image re sizing will be out of control unless you set the Width/Height to percentage or relative values.

if you don't want to do this, simply set the min-width and min-height CSS Properties.

i prefer the relative sizing (ex. width: 30%; text-align: left;)

于 2013-04-01T22:15:47.347 回答