html - 使用 CSS 将 <div> 左对齐到居中的 <div>

Question

我正在尝试创建一个包含多个 <div> 的网页根据下图使用 CSS block 对它们进行样式设置。但是我不知道如何完成这项工作。我已经按照答案(https://stackoverflow.com/a/26599439/478406 和 https://stackoverflow.com/a/26598329/478406)的建议尝试了两种变体，但我想我遗漏了一些东西。

Answer 1

如果我正确理解您的要求，下面的 HTML 和 CSS 应该可以满足您的要求。

请注意，display:inline-block 允许两个 div 元素并排放置，因此您可以设置它们的 text-align 独立。此外，由于 inline-block 属性，当屏幕尺寸变小时，元素将换行。

http://jsfiddle.net/k6y8asbk/

.message-text{
    text-align:left;
    display:block;
}

.some-text,
.my-list{
    display:inline-block;
    text-align:left;
    vertical-align:top;
}

.my-list{
    text-align:center;
}

ul{
    margin-top:0px;   
}

<div id='message-container'>
    <div class='message-text'>Message Text</div>
    <div class='some-text'>Some text</div>
    <div class='my-list'>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
    </div>
</div>