我正在构建一个模板只是为了练习我的技能，但我对并排 float 列有很大的疑问。 (名称为:.sidebar 和.content 的 div)我希望它们都向左浮动并并排坐着。在此之前，我将提供我的代码。有什么建议吗？
@font-face {
font-family: "myriadpro";
src: url("../fonts/myriad-pro-bold-condensed-webfont.eot");
src: url("../fonts/myriad-pro-bold-condensed-webfont.eot?#iefix") format("embedded-opentype"),
url("../fonts/myriad-pro-bold-condensed-webfont.woff2") format("woff2"),
url("../fonts/myriad-pro-bold-condensed-webfont.woff") format("woff"),
url("../fonts/myriad-pro-bold-condensed-webfont.svg#myriadpro") format("svg");
font-weight: bold;
font-style: bold;
}
@font-face {
font-family: "myriadpro_regular";
src: url("../fonts/myriadproregular.eot");
src: local("myriadproregular"), url("../fonts/myriadproregular.woff") format("woff"), url("../fonts/myriadproregular.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
* { margin: 0px; padding: 0px; outline: 0; box-sizing: border-box; }
body, html { height: 100%; }
body {
font-family: "Bentham", serif, "Arial", sans-serif;
font-size: 14px;
line-height: 1.667;
background: #f1f1f1;
color: #3f3f3f;
}
/* Main Template Settings */
.container { width: 960px; margin: 0 auto; }
.header { margin-top: 8px; }
.main { background: #fff; height: 100%; overflow: hidden; }
.sidebar { display: block; width: 206px; padding: 6px 14px 0 6px; }
.content { float: left; margin-left: 206px; padding: 9px 12px; overflow: hidden; }
.sidebar:after,
.clearfix:after { content: ''; display: table; clear: both; font-size: 0; line-height: 0; height: 0; }
/* Header CSS Styles */
.logo { width: 353px; float: left; margin: 28px 0 18px 6px; }
.logo img { max-width: 100%; height: auto; }
.customer-nav ul { float: right; list-style: none; }
.customer-nav ul li { display: inline-block; margin-right: 12px; }
.customer-nav ul li a { font-family: "myriadpro_regular", sans-serif; font-size: 13px; color: #8e8e8e; text-decoration: none; }
.customer-nav ul li a:hover { color: #bebebe; }
.search:after,
.clearfix:after { content: ''; display: table; clear: both; font-size: 0; line-height: 0; height: 0; }
.search { position: relative; top: 63px; z-index: 2; }
.search-field { position: absolute; left: 75.6%; padding: 7px; background: #5a9abe; border-radius: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.field { width: 221px; border: 0; border-top: 1px solid #7f7f7f; border-left: 1px solid #7f7f7f; border-radius: 3px; padding: 7px 10px 5px 35px; color: #a0a0a3; font-style: italic; }
.icon { position: relative; }
.icon-magnifier:after { content: ''; position: absolute; top: 0; left:8px; width: 12px; height: 16px; background: url(../images/magnifier.png) no-repeat 0 0; }
.shadow-line { width: 2px; position: absolute; top: 9px; left: 34px; }
.shadow-line img { max-width: 100%; height: auto; }
.main-nav { min-width: 100%; height: 48px; position: relative; z-index: 999999; }
.main-nav {
background: rgb(149,197,222);
background: -moz-linear-gradient(top, rgba(149,197,222,1) 0%, rgba(141,188,212,1) 100%);
background: -webkit-linear-gradient(top, rgba(149,197,222,1) 0%,rgba(141,188,212,1) 100%);
background: linear-gradient(to bottom, rgba(149,197,222,1) 0%,rgba(141,188,212,1) 100%);
}
.navigation { border-top: 7px solid #5a9abe; }
.navigation ul { list-style: none; margin: 9px 0 0 18px; }
.navigation ul li { display: inline-block; }
.navigation li a { font-family: "Bentham", serif; font-style: normal; font-weight: 400; font-size: 15px; color: #fff; text-decoration: none; text-transform: uppercase; /* SOME PADDING */ }
.navigation ul li a:hover { color: #528bac; }
.navigation ul li + li:before { content: ''; border-right: 1px solid #74accb; margin: 0 15px 0 15px; }
/* Sidebar CSS Styles */
.widgeds { width: 200px; list-style: none; }
.widget h3 { font-family: "Bentham", serif; font-size: 14px; font-style: normal; text-transform: uppercase; padding: 9px 12px 7px 12px; margin-bottom: 6px; }
.widget h3 {
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(222,222,222,1) 100%);
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(222,222,222,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(222,222,222,1) 100%);
}
.widget { background: #fafafa; border: 1px solid #e2e2e2; margin-bottom: 6px; }
.widget ul { list-style: none; padding-bottom: 2px; }
.widget ul li { margin-bottom: 1px; }
.widget ul li a { display: block; font-family: "myriadproregular", sans-serif; font-size: 14px; padding: 0px 11px 2px 12px; text-decoration: none; color: #3f3f3f; line-height: 25px; }
.widget ul li a:hover { color: #528bac; }
.product-image { display: block; width: 162px; border: 1px solid #bebebe; }
.product-image img { max-width: 100%; height: auto; }
.product-image:hover { opacity: 0.8; }
.title { font-family: "myriadproregular", sans-serif; font-size: 14px; padding: 0px 0px 0px 0px; }
.price { text-align: center; font-family: "myriadproregular", sans-serif; font-size: 14px; color: #528bac; padding: 0 4px 12px 4px; }
.btn { display: inline-block; padding: 3px 12px 1px 12px; color: #fff; border: 0; border-radius: 4px; border-bottom: 1px solid #336990; text-decoration: none; }
.btn-details {
background: rgb(99,157,197);
background: -moz-linear-gradient(top, rgba(99,157,197,1) 0%, rgba(61,125,171,1) 100%);
background: -webkit-linear-gradient(top, rgba(99,157,197,1) 0%,rgba(61,125,171,1) 100%);
background: linear-gradient(to bottom, rgba(99,157,197,1) 0%,rgba(61,125,171,1) 100%);
}
.view-featured { font-family: "myriadproregular", sans-serif; font-size: 12px; text-align: center; padding: 0 5px 7px 8px; }
.view-featured a { text-decoration: none; color: #3f3f3f; }
.view-featured a:hover { color: #528bac; }
/* Content CSS Styles */
.product-labels { font-family: "myriadproregular", sans-serif; }
.product-labels h1 { font-size: 12px; color: #528bac; text-transform: uppercase; padding-bottom: 2px; }
.product-labels p { float:left; font-size: 11px; color: #b2b2b2; padding-left: 2px; margin-bottom: 22px; letter-spacing: 0.03em; }
.product-list { text-align: justify; float: left; }
.item { text-align: center; }
.product-list ul { margin-right: -22px; }
.product-list ul li { list-style: none; float: left; width: 162px; margin: 0 26px 47px 0; }
.product-list ul li img { max-width: 100%; height: auto; border: 1px solid #b7b7b7; }
.product-list ul li a { color: #fff; }
.product-list ul li a:hover { opacity: 0.8; }
.footer { background: #5d9dc0; padding: 25px 0 23px 0; text-align: center; color: #fff; font-family: "Arial", sans-serif; font-size: 12px; border-top: 1px solid #e2e2e2; }
.footer { clear: both; }
::-webkit-input-placeholder { color: #a0a0a3; font-style: italic; }
:-moz-placeholder { color: #a0a0a3; font-style: italic; }
::-moz-placeholder { color: #a0a0a3; font-style: italic; }
:-ms-input-placeholder { color: #a0a0a3; font-style: italic; }
@media (max-width: 959px) {
.container { width: 768px; padding: 0 20px; }
.footer { background: red; }
}
@media (max-width: 767px) {
.container { width: 100%; padding: 0 15px; }
.footer { background: green; }
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bedding Store Template</title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://fonts.googleapis.com/css?family=Bentham" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header class="header">
<div class="logo">
<img src="images/logo.png" width="353" height="46" title="someText" alt="someText">
</div><!-- /.logo -->
<nav class="customer-nav">
<ul>
<li><a href="#">Login</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">View Cart</a></li>
<li><a href="#">Checkout</a></li>
</ul>
</nav><!-- /.customer-nav -->
<div class="search">
<div class="search-field">
<a href="#" class="icon icon-magnifier"></a>
<img src="images/shadow-line.png" width="2" height="26" title="someText" alt="someText" class="shadow-line">
<input type="search" name="search" id="search-input" placeholder="Search" class="field">
</div><!-- /.search-field -->
</div><!-- /.search-field -->
<div class="main-nav">
<nav class="navigation">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">new products</a></li>
<li><a href="#">specials</a></li>
<li><a href="#">my account</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact us</a></li>
</ul>
</nav><!-- /.nav -->
</div><!-- /.main-nav -->
</header><!-- /.header -->
<main class="main">
<aside class="sidebar">
<ul class="widgeds">
<li class="widget">
<h3>Shop by categories</h3>
<ul>
<li><a href="#">Comforters</a></li>
<li><a href="#">Sheets</a></li>
<li><a href="#">Qults & Bed Covers</a></li>
<li><a href="#">Pillows & Bedding Basics</a></li>
<li><a href="#">Bath Shop</a></li>
<li><a href="#">Gifts</a></li>
<li><a href="#">Clearance</a></li>
</ul>
</li><!-- /.widget -->
<li class="widget">
<h3>more information</h3>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Shipping Information</a></li>
<li><a href="#">Return Policy</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li><!-- /.widget -->
<li class="widget">
<h3>featured products</h3>
<div class="item">
<a href="#" class="product-image"><img src="images/la-crosse-down-comforter.jpg" width="162" height="162" title="someText" alt="someText"></a>
<p class="title">La Crosse© Down Comforter</p>
<!-- /.title -->
<p class="price">$197.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
<p class="view-featured"><a href="">View All Featured</a></p>
</li><!-- /.widget -->
</ul><!-- /.widgeds -->
</aside><!-- /.sidebar -->
<div class="content">
<div class="product-labels">
<h1>products > comforters</h1>
<p>Displaying 1-12 of 12 Product(s)</p>
</div><!-- /.products-label -->
<div class="product-list">
<ul>
<li>
<div class="item">
<a href="#"><img src="images/white-bay-supersize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">White Bay© Supersize</p>
<!-- /.title -->
<p class="price">$339.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/supersize-baffled-square.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">Supersize Baffled Square</p>
<!-- /.title -->
<p class="price">$229.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/framework-tcs-down.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">Framework TCS© Down</p>
<!-- /.title -->
<p class="price">$219.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/st-tropez-solid.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">St. Tropez© Solid</p>
<!-- /.title -->
<p class="price">$114.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#" class="product-image"><img src="images/legends-damask-baffled.jpg" width="162" height="162" title="someText" alt="someText"></a>
<p class="title">Legends© Damask Baffled</p>
<!-- /.title -->
<p class="price">$509.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/diamond-supersize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">Diamond© Supersize</p>
<!-- /.title -->
<p class="price">$259.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/la-crosse-supersize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">La Crosse© Supersize</p>
<!-- /.title -->
<p class="price">$143.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/white-bay-midsize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">White Bay© Midsize</p>
<!-- /.title -->
<p class="price">$319.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/st.tropez-stripe.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">St. Tropez© Stripe</p>
<!-- /.title -->
<p class="price">$114.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/legends-imperial.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">Legends© Imperial</p>
<!-- /.title -->
<p class="price">$820.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/baffled-supersize-square.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">Supersize Baffled Square</p>
<!-- /.title -->
<p class="price">$199.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
<li>
<div class="item">
<a href="#"><img src="images/greek-key-supersize.jpg" width="162" height="162" title="someText" alt="someText" class="product-example"></a>
<p class="title">Greek Key™ Supersize</p>
<!-- /.title -->
<p class="price">$159.00</p><!-- /.price -->
<a href="#" class="btn btn-details">Details</a>
</div><!-- /.item -->
</li>
</ul>
</div><!-- /.gallery-container -->
</div><!-- /.content -->
<footer class="footer">
<p> 2011, Bedding Store - All Rights Reserved. - CoreCommerce Ecommerce Software & Shopping Cart Software</p>
</footer><!-- /.footer -->
</main><!-- /.main -->
</div><!-- /.container -->
</body>
</html>最佳答案
添加这个CSS
.sidebar {
display: block;
float: left;
padding: 6px 14px 0 6px;
width: 206px;
}
.content {
float: left;
/*margin-left: 206px;*//*Remove this*/
overflow: hidden;
padding: 9px 12px;
width: calc(100% - 206px);
}
关于html - 网站 float 内容容器问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40057631/