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>

Answer 2

尝试这样：通过绝对定位将左上方和下方部分粘贴到角落，使父div与最右边部分的内容一样高，通过左边距为左边部分腾出空间。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我在#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/

Answer 4

显示内联块，具有2个相对位置，另一个位置为绝对值，fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

首先给div＃redeem 100％宽度

其次使用一个额外的父div，它只包含div＃1和div＃two（称他为div #main）

给div＃main 66％宽度和div＃three 34％宽度（如你所愿）

就是这样。

使div #main高达div＃redeem：

如果div＃redeem没有固定的高度，它的高度将适应div＃3或div＃one和div＃two的高度（如果后者的高度高于div＃3）
进一步的问题（有很多解决方案）搜索＆＃39;两个div相同的高度＆＃39;。一个现代的解决方案（浏览器支持较少）将使用flexboxes（锁定在w3schools）。较旧的一个可能是使用css-tables（div {display：table} ...） - 有些人出于语义原因不喜欢它，但在某些情况下它可以正常使用。＆＃39; Faux Columns＆＃39;是另一种较老的技术。我的建议是：让它成为现实。让div＃redeem根据div＃3

在div的右边垂直对齐两个div

5 个答案: