Question

我有两列，在左栏中我已使.title使用负边距扩展屏幕的整个宽度。在右侧列中，我有.sidebar我希望它显示在扩展的.title div下方。运行下面的代码段，您将看到它在同一行开始。换句话说，我希望橙色div低于黄色div。

我不想在margin-top上使用.sidebar，因为左栏中.title的高度会有所不同。

我意识到这可以通过javascript实现，但我正在寻找一个更强大的解决方案，只需使用html和css，这可能吗？

如果更方便http://jsfiddle.net/2dLaw17r/1/

，我也创造了一个小提琴

.container {
    width:600px;
    margin:0 auto;
    clear:both;
    padding:1em;
    background:grey;    
}
.left {
    float:left;
    width:60%;
}

.left .title {
    margin:0 -500%;
    padding:0 500%;
    background: yellow;
}

.right{
    float:right;
    width:40%;
    background:orange;   
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container clearfix">
    <div class="left">
      <article>            
         <div class="title">Title extends beyond container</div>
        <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
      <article>
    </div>
    <div class="right">
        <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
    </div>
</div>

Answer 1

在包含文章内容的文章中放置一个div。这样，标题和内容都保留在文章中。接下来，将文章内容向左浮动，将侧边栏向右浮动。不再需要负边距技巧：

＆＃13;

.container {
  width: 600px;
  margin: 0 auto;
  clear: both;
  padding: 1em;
  background: grey;
}
.title {
  background: yellow;
  /* eye candy only */
  margin: 0 -1em;
  padding: 0 1em;
}
.left {
  float: left;
  width: 60%;
}
.right {
  float: right;
  width: 40%;
  background: orange;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

<div class="container clearfix">
  <article>
    <div class="title">Title extends beyond container<br>And can grow in height</div>
    <div class="content left">
      <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
    </div>
  </article>
  <div class="sidebar right">
    <p>items in this sidebar div should fall below the title div. Currently it starts on the same line.</p>
  </div>
</div>

＆＃13;

Answer 2

问题在于你的设计，而不是CSS ...如果你仔细规划你的布局，你可以完全避免那些负边距。我可以提出可能的解决方案如下：

重新设计您的标记并以更有用的方式重命名类：

working fiddle with updated markup

<强> HTML

<div class="container clearfix">
    <div class="left">
        <div class="title">Title extends beyond container</div>
        <div class="right">
            <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
        </div>
        <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
    </div>
</div>

<强> CSS

html, body { /* always mention this in you CSS - rule of Thumb for CSS */
    width:100%;
    height:100%;
    margin:0;
    padding:0
}
.container {
    width:100%; /* stretch div to take full width of parent - HTML, BODY*/
    margin:0 auto;
    clear:both;
    padding:1em;
    background:grey;
}
.left {
    /* float:left;*/ /* not needed with updated layout :) */
    width:100%;
}
.left .title {
    /*margin:0 -500%;  
    padding:0 500%;  /* nightmare is removed */ */
    width:100%;
    background: yellow;
}
.right {
    float:right;
    width:40%;
    background:orange;
}
.clearfix:after {
    content:"";
    display: table;
    clear: both;
}

Answer 3

就像Antoine所说，你必须把标题放在左边的div之外。

＆＃13;

.container {
    width:600px;
    margin:0 auto;
    clear:both;
    padding:1em;
    background:grey;    
}
.left {
    float:left;
    width:60%;
}

.title {
    
    background: yellow;
}

.right{
    float:right;
    width:40%;
    background:orange;   
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

＆＃13;

<div class="container clearfix">
    <div class="title">Title extends beyond container</div>
    <div class="left">
        
        <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
    </div>
    <div class="right">
        <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
    </div>
</div>

＆＃13;

Answer 4

你必须清除像：

这样的花车

.container {
    width:600px;
    margin:0 auto;
    clear:both;
    padding:1em;
    background:grey;    
}
.left {
    float:left;
    width:60%;
}

.left .title {
    margin:0 -500%;
    padding:0 500%;
    background: yellow;
}

.right{
    float:right;
    width:40%;
    background:orange;   
    clear: left;/*add clear left*/
    margin-top: -60px;/*add negative top margin*/
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="container clearfix">
    <div class="left">
        <div class="title">Title extends beyond container</div>
        <p>lorem ipsum someip orlem lorem ipsum someip orlem lorem ipsum someip orlem</p>
    </div>
    <div class="right">
        <div class="sidebar">items in this sidebar div should fall below the title div. Currently it starts on the same line.</div>
    </div>
</div>

浮动div从另一个全宽浮动div开始

4 个答案: