html - 垂直对齐顽固的段落

Question

我一直在尝试让“关于我们”部分垂直对齐下面的段落。出于某种原因，当我尝试调整查看区域的大小或从较小的屏幕查看时，关于和我们位于两条不同的行上，如果您继续缩小区域，“关于我们”将在下方和左侧下拉的整个段落。

我正在思考的第一个问题是如何使“关于我们”文本保持在一行，而不是折叠成两行或多行。我的第二个问题是如何在不删除段落下方的“关于我们”文本的情况下使其可扩展？

附件是我在 JSFiddle 中的代码。

多谢你们！！

这是令人不安的html：

                <div class="mainContentContainer">
                <div class="mainContent1">
                        <h1>
                ABOUT US
            </h1>

                </div></div>

这是随附的 CSS：

.mainContentContainer {
    width: 85%
}
.mainContent1 h1 {
    font-family:verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    color:#00245D;
    text-align: left;
    float: left;
    width: 80%;
    min-width: 10%;
}
.mainContent1 {
    color: #000;
    text-align: left;
    max-width: 960px;
    min-width: 100px;
    width: 35%;
}
.mainContent2 {
    color: #000;
    text-align: left;
    max-width: 960px;
    width: 50%;
    margin-left: -6%;
    display: inline-block;
}

score 1 · Accepted Answer

您的标记相当混乱，所以我尝试了一种更简单的方法，使用“清理”标记（参见http://jsfiddle.net/danielecocca/9eJnt/）。

HTML

<div class="table">
    <div class="table-row">
        <ul class="table-cell">
            <!-- left side pane contents here -->
        </ul>
        <div class="table-cell">
            <!-- right side pane contents here -->
        </div>
    </div>
</div>

CSS

.table {
    display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
}

这使用了几个容器div元素，一个样式为，另一个样式为display: table，display: table-row左侧和右侧窗格样式为display: table-cell。稍加调整，它肯定会满足您的需求（没有table使用实际元素，显示为表格，调整大小就好了）。

为了避免在多行上打断，我支持 Serlite 的建议：你可以使用white-space: nowrap，它将空格视为不间断的空间实体（ ）。

html - 垂直对齐顽固的段落

1 回答 1

Related

Reference