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;
}

Answer 1

你的标记相当混乱，所以我尝试了一种更简单的方法来清理＆＃34;＆＃34;标记（见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，它将空格看作是不间断的空间实体（ ）。

垂直对齐顽固的段落

1 个答案: