html - 在 div 的右侧垂直对齐两个 div

Question

我试图按以下顺序排列我的网页:一个包含两个部分的 div，两个部分在父高度的部分左侧垂直对齐。

这是我正在尝试做的事情的简要说明:

#main {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    display: block;
}

#three {
    margin:0;
    padding:0;
    float:right;
}

<div id="main">
  <section id="one">
    <p>first section</p>
  </section>
  <section id="two">
    <p>second section</p>
  </section>
  <section id="three">
    <img>
  </section>
</div>

我应该为每个部分提供哪些 css 属性？

Answer 1

如果这是您从头开始构建的东西，另一种选择是使用像 zurb foundation 这样的框架。

这将为您提供快速轻松地构建此类内容的工具，不仅如此，还有大量其他“复杂”内容。我在我所有的站点附近都构建了这个，它消除了大约 75% 的时间和精力。然后，您可以规定在手机和平​​板电脑尺寸等方面会发生什么。

像这样的东西看起来像......

<div class="row">
    <div class="medium-6 small-12 columns">
        <div id="one" class="small-12 columns">
            Your content
        </div>
        <div id="two" class="small-12 columns">
            Your content
        </div>
    </div>
    <div id="three" class="medium-6 small-12 columns">
        Your content
    </div>
</div>