使用浮動的三列布局

Question

我將如何處理三列布局以防止背景圖像崩潰並使所有內容都對齊到頂部。我知道它幾乎是正確的，但我的廣告繼續低於一切。難道是因爲我已經將#content作爲內嵌塊嗎？我需要左側的推薦內容，中心的內容以及右側的廣告。加上背景圖像仍然可見。

<div id="wrapper"> 

<div id="inner-wrapper"> 
<div id="content"> 
<h1>Heading</h1> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p> 
</div> 

<div id="testimonials"> 
<h2>What My Clients Say</h2> 
<p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p> 
</div> 
</div><!-- end #inner-wrapper --> 

<div id="ads"> 
<h2>Ads</h2> 
<p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p> 
</div> 

</div><!-- end #wrapper --> 
</body> 

CSS：（迄今）

#wrapper{background-image: url(images/columns-195-570-195.png); 
width: 960px; 
align-content: center;} 

#testimonials{ 
    float: left; 
    width: 195px; 
} 

#content{ 
    display: inline-block; 
    width:570px; 
} 

#ads{ 
    float: right; 
    width: 195px;} 

謝謝！

Answer 1

好的，在這裏你可以找到兩種解決方案。浮動解決方案（您需要它）和Flexbox解決方案。僅

解浮動

#wrapper{ 
 
    align-content:center; 
 
    background-image: url(images/columns-195-570-195.png); 
 
    width: 960px; 
 
} 
 
#testimonials{ 
 
    float:left; 
 
    width:195px; 
 
} 
 
#inner-wrapper { 
 
    float:left; 
 
} 
 
#content { 
 
    display:inline-block; 
 
    width:570px; 
 
} 
 
#ads { 
 
    float:left; 
 
    width:195px; 
 
}

<div id="wrapper"> 
 
    <div id="inner-wrapper"> 
 
     <div id="content"> 
 
      <h1>Heading</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p> 
 
     </div> 
 
     <div id="testimonials"> 
 
      <h2>What My Clients Say</h2> 
 
      <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p> 
 
     </div> 
 
    </div><!-- end #inner-wrapper --> 
 
    <div id="ads"> 
 
     <h2>Ads</h2> 
 
     <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p> 
 
    </div> 
 
</div><!-- end #wrapper -->

解Flexbox的

#wrapper{ 
 
    align-content:center; 
 
    background-image:url(images/columns-195-570-195.png); 
 
    display:flex; 
 
    width:960px; 
 
} 
 
#testimonials{ 
 
    width:195px; 
 
} 
 
#content{ 
 
    width:570px; 
 
} 
 
#ads { 
 
    width:195px; 
 
}

<div id="wrapper"> 
 
    <div id="testimonials"> 
 
     <h2>What My Clients Say</h2> 
 
     <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p> 
 
    </div> 
 
    <div id="content"> 
 
     <h1>Heading</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p> 
 
    </div> 
 
    <div id="ads"> 
 
     <h2>Ads</h2> 
 
     <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p> 
 
    </div> 
 
</div>

你不需要包裝或浮動來獲得工作的三列布局。

Answer 2

嘗試在每列上使用float: left;，您可以在最新的列上添加（如有必要）float: clear;。

關於你的圖片問題，你需要設置包裝div的大小和位置。

例子也可見這裏：https://jsfiddle.net/er4h0e95/6/

#wrapper { 
 
    position:absolute; 
 
    background-image: url(http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg); 
 
    width: 960px; 
 
    height:100%; 
 
    align-content: center; 
 
} 
 
#testimonials { 
 
    float: left; 
 
    width: 195px; 
 
} 
 
#content { 
 
    float: left; 
 
    width:570px; 
 
} 
 
#ads { 
 
    position:absolute; 
 
    float: left; 
 
    width: 195px; 
 
    right:0; 
 
}

<div id="wrapper"> 
 
    <div id="inner-wrapper"> 
 
     <div id="content"> 
 
      <div id="testimonials"> 
 
       
 
<h2>What My Clients Say</h2> 
 

 
       <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p> 
 
      </div> 
 
      
 
<h1>Heading</h1> 
 

 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p> 
 
     </div> 
 
    </div> 
 
    <!-- end #inner-wrapper --> 
 
    <div id="ads"> 
 
     
 
<h2>Ads</h2> 
 

 
     <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p> 
 
    </div> 
 
</div> 
 
<!-- end #wrapper -->

Answer 3

如果更改testimonials和content div的HTML格式的命令，它會正常工作。 Demo

#testimonials { 
    float: left; 
    width: 195px; 
} 
#content { 
    display: inline-block; 
    width:570px; 
} 
#ads { 
    float: right; 
    width: 195px; 
} 

HTML：

<div id="testimonials">.. </div> 

<div id="content">..</div> 

Answer 4

內包裝是創建一個div顯示推薦和內容塊是推動廣告到新行。要麼移動結束div來包含所有三個部分，要麼將內部包裝器和廣告顯示爲內聯塊，以便它們正確排列。

<div id="wrapper"> 
    <div id="inner-wrapper"> 
     <div id="content">    
      <h1>Heading</h1> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend mi eu tellus vulputate hendrerit. Suspendisse potenti. Maecenas viverra, turpis sit amet semper mattis, lectus arcu viverra enim, et euismod sapien augue eu risus. Cras feugiat dapibus viverra. Aliquam erat volutpat. Vestibulum sodales tincidunt neque, eu gravida nibh feugiat sed. Ut lorem mauris, aliquam eu quam at, congue ultrices leo. Vivamus at aliquam magna, vitae malesuada enim. Donec semper justo magna, adipiscing rutrum magna pellentesque non. Sed condimentum ultricies suscipit. Vestibulum auctor accumsan risus, nec commodo nulla ultricies ac. Vestibulum pharetra consectetur nunc id ultricies. Suspendisse fermentum tincidunt vulputate. Praesent ultrices nunc est, vitae facilisis erat posuere eu.</p> 
     </div> 
     <div id="testimonials"> 
      <h2>What My Clients Say</h2> 
      <p>Sed sit amet nibh iaculis, lacinia diam nec, mollis tellus. Nunc fringilla est nec tellus porttitor ornare. Donec venenatis justo eu lacus interdum interdum a quis justo. Integer et diam vitae neque consectetur bibendum eu non dui. Etiam eu aliquet justo, sed mattis nibh. Mauris fringilla accumsan urna, at pulvinar ligula dignissim vel. Aenean posuere mi sit amet convallis pellentesque.</p> 
     </div> 
     <div id="ads">    
      <h2>Ads</h2> 
      <p>Fusce faucibus facilisis est. Praesent a purus adipiscing, varius turpis in, malesuada risus. Vivamus ornare diam odio, ut elementum magna pretium a. Etiam porta diam elit, egestas pharetra erat mollis vel. Donec ut mauris sit amet tortor porta sollicitudin. Sed ultricies mattis semper. In nec quam eget nibh pellentesque bibendum a ut libero. Nulla id risus viverra, varius felis eget, interdum odio. Phasellus venenatis blandit sem, hendrerit vehicula sem luctus quis.</p> 
     </div> 
    </div> 
    <!-- end #inner-wrapper --> 
</div> 
<!-- end #wrapper --> 

要居中添加內容：

#wrapper { 
    background-image: url(images/columns-195-570-195.png); 
    width: 960px; 
    margin: 0 auto; 
}