logo标签列表

在一个 div 右侧将两个 div 垂直对齐

htmlcss
4
我正在尝试按照以下顺序排列我的网页： 一个包含两个垂直对齐的部分的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属性？

2
你到目前为止尝试了什么？ - Thibault
一种选择是将“one”和“two”包装在一个div中，然后将该div与“three”对齐。另一种选择是使用绝对定位（虽然这可能不是您想要的，但从技术上讲它可以工作）。 - nurdyguy
2
他或她只是一个初学者，不理解为什么有人因任何原因而对他/她进行负评。因此赞成继续前进 :-) - sasha
1
同意。我知道在网站上不要充斥着毫无意义的问题很重要，但有一半的时间，我甚至害怕在这里发布任何内容，因为我错过了一个“逗号”，就会被别人投票反对。 - Tony Ray Tansley
@sasha 我认为我的答案值得点赞，它是一个完全可行的解决方案。同时请在全屏模式下查看，效果很好。谢谢。 - Rachel Gallen
显示剩余4条评论
5个回答
2
如果您正在从头开始构建此类网页，则另一个选择是使用像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>
1
尝试这样做：通过绝对定位将左上和左下部分固定在角落，使父div的高度与最右侧部分的内容一样高，通过margin-left为左侧部分腾出空间。 

#redeem {
  width: 500px;
  position: relative;
  border: 1px solid #C00;
}

section {
  border: 1px solid black;
}

section#one,
section#two {
  position: absolute;
  left: 0px;
  width: 180px;
}

section#one {
  top: 0px;
  bottom: 100px;
}

section#two {
  bottom: 0px;
  height: 80px;
}

section#three {
  margin-left: 200px;
}
<div id="redeem">
  <section id="one">
    <p>first section</p>
  </section>
  <section id="two">
    <p>second section</p>
  </section>
  <section id="three">
    <p>third section</p>
    <p>other content of third section</p>
    <p>other content of third section</p>
    <p>other content of third section</p>
    <p>other content of third section</p>
    <p>other content of third section</p>
  </section>
</div>

1

展示 inline-block，其中一个使用相对定位，另一个使用绝对定位，fiddle。

.wrapper1 section {
  display: inline-block;
  width: 75%;
  position: relative;
  float: left;
}
.wrapper2 section {
  display: inline-block;
  width: 24%;
  position: absolute;
  float: right;
}
#redeem {
  vertical-align: top!important;
}
<div id="redeem">
  <div class="wrapper1">
    <section id="one">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id
        felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p>
    </section>
    <section id="two">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id
        felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
        Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p>
    </section>
    <div class="wrapper2">
      <section id="three">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis imperdiet dolor vel ornare fringilla. Phasellus ac finibus libero. Curabitur tristique sit amet tellus eleifend condimentum. Aenean euismod ultrices justo sit amet maximus. Mauris id
          felis non ligula dictum sollicitudin ut ut magna. Ut eu nisi vitae ipsum finibus gravida. Phasellus libero mi, rhoncus ut malesuada vitae, semper in metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
          Quisque non finibus ante. Donec justo est, blandit ut convallis nec, posuere nec erat. Sed venenatis ornare felis, in egestas eros ultrices sed.</p>
      </section>
    </div>
  </div>

1

我在 #one 和 #two 周围添加了一个包含的 div，然后使用浮动布局

<div id="redeem">
  <section id="left-side">
      <section id="one">
        <p>first section</p>
      </section>
      <section id="two">
        <p>second section</p>
      </section>
    </section>
  <section id="three">
    <p>third section</p>
  </section>
    <div class="clear"></div>
</div>

#redeem{
    width:100%;
    border-radius:30px;
    background:blue;
    padding:30px;
}
#left-side{
    width:45%;
    float:left;
}
#one{
    width:100%;
    margin-bottom:30px;
    border-radius:30px;
    background:white;
    padding:10px;
    min-height:130px
}
#two{
    width:100%;
    border-radius:30px;
    background:white;
    padding:10px;
    min-height:130px
}
#three{
    width:45%;
    float:left;
    border-radius:30px;
    background:white;
    margin-left:5%;
    padding:10px;
    min-height:300px
}
.clear{
    clear:both;   
}

https://jsfiddle.net/o6h22td4/

0

首先给div#redeem 100％的宽度

其次使用一个额外的父级div，其中仅包含div#one和div#two（例如称之为div#main）

将div#main的宽度设置为66％，将div#three的宽度设置为34％（根据自己的喜好）

就这样。

要使div#main与div#redeem的高度相同：

  • 如果div#redeem没有固定的高度，则其高度将适应于div#three或div#one和div#two的高度（如果后者的高度加起来比div#three更高）
  • 有关进一步问题（有许多解决方案），请搜索“两个div相同的高度”。现代的解决方案（支持较少的浏览器）是使用flexbox（参见w3schools）。旧的解决方案可能是使用CSS表格（div {display：table} ...）-有些人出于语义原因不喜欢它，但在某些情况下我认为没问题。“仿列”是另一种较旧的技术。我的建议是：让div#redeem根据div#three的高度自适应其高度。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接