Question

我想让display: inline-table / display: table-row的div在大屏幕上很好地排列，并在较小的屏幕上叠加内容，纯粹用CSS实现。以下是我的尝试和解释。

或者，视觉上：

大屏幕

|---------|---------|---------|
|         |         |Longer   |
|Header 1 |Header 2 |Header   |
|---------|---------|---------|
|Content  |Content2 |Content3 |
|---------|---------|---------|

较小的屏幕（<750px宽）

|-------------|
|Header 1     |
|-------------|
|Content      |
|-------------|
|Header 2     |
|-------------|
|Content2     |
|-------------|
|Longer Header|
|-------------|
|Content3     |
|-------------|

基础知识

对于页面，我有一个3列布局，其中每列都有标题和内容。理想的设置是所有标题都垂直排列（基本上是verical-align: bottom）。但是，在'mobile'上，我将其定义为屏幕宽度小于750px，标题应该叠加在通常映射到列中的内容之上。

尝试1

这是我第一次设置它，基本上是：

HTML 的

<div id="Wrapper">
    <div class="Column">
        <div class="Header">...</div>
        <div class="Content">...</div>
    </div>

    ... (and repeat) ...
</div>

CSS

#Wrapper{
    display: inline-table;
}

#Wrapper .Column{
    display: table-row;
    width: 33%;
}

这种方法的问题在于.Header对象，无论其样式如何，如果其中包含多行文本，就不会与其他.Header对齐。

尝试2

为此，我只将所有标题div分成了自己的div，并将内容分成了自己的包装器，其中包装div的标题高于内容一，然后用display: inline-table设置所有标题的样式我可以将vertical-align: bottom应用于每个人。这适用于较长的标题，但显然没有按照小屏幕所需的顺序崩溃。

注意

我更喜欢只有CSS的解决方案，但jQuery / Javascript也没关系，如果没有办法（或者使用CSS的方式非常糟糕）。

Answer 1

创建像表一样的<div>，它在样式设置时更加灵活这是我的小提琴https://jsfiddle.net/ueeL0m6j/3/

    <div id="Wrapper">
    <div class="Column">
        <div class="Header">Header 1</div>
        <div class="Content">Content</div>
    </div>
    <div class="Column">
        <div class="Header">Header 2</div>
        <div class="Content">Content</div>
    </div>
   <div class="Column">
        <div class="Header">Header 3</div>
        <div class="Content">Content</div>
    </div>

   </div>`

CSS

.Wrapper{width: 100%;}
.Column{width: 32%; float: left; text-align: center;}

@media only screen and (max-width: 750px){

    .Column{width: 32%;margin-right: 67%;}
}

Answer 2

使用display: inline-block。它的错误比float少得多。只需在父项上设置font-size: 0，在子项上设置font-size: initial以删除then元素之间的间距，然后将宽度设置为其父项宽度的三分之一。

如果屏幕小于750像素，则使用媒体查询将宽度更改为100％。

body {
    margin: 0;
}
#Wrapper {
    font-size: 0;
}

#Wrapper .Column {
    display: inline-block;
    font-size: 1rem;
    width: 33.333333%;
}

#Wrapper .Column > * {
    background: #ccc;
    border: 1px solid #eee;
}

@media (max-width: 750px) {
    #Wrapper .Column {
        width: 100%;
    }
}

<div id="Wrapper">
    <div class="Column">
        <div class="Header">...</div>
        <div class="Content">...</div>
    </div>
    <div class="Column">
        <div class="Header">...</div>
        <div class="Content">...</div>
    </div>
    <div class="Column">
        <div class="Header">...</div>
        <div class="Content">...</div>
    </div>
</div>

按列堆栈表样式的Div

2 个答案: