Question

我试图让两个div彼此相邻。他们都在父div（包装器）内设置。我希望包装器的页面宽度为90％，而其他两个都是填充90％的百分比宽度。建议提示等？

CSS

#wrapper {
margin: 0 auto;
background:none;
width:90%;
}
.content {
top: 0;
left:0;
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(255, 255, 255, 0.3);
margin: 0 auto;
width:40%;
margin-bottom:20px;
float: left;
position:relative;
}

.sidebar {
top: 0;
left:0;
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(255, 255, 255, 0.3);
margin: 0 auto;
width:60%;
margin-bottom:20px;
float: right;
position:relative;
}

Answer 1

您的代码是正确的，只需在两个子元素中添加box-sizing:border-box，因为您在两个元素中使用padding将它们对齐在一行中，如下所示，

＆＃13;

#wrapper {
margin: 0 auto;
background:none;
width:90%;
}
.content {
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(25, 255, 255, 0.3);
margin: 0 auto;
width:40%;
margin-bottom:20px;
float: left;
position:relative;
box-sizing:border-box;
}

.sidebar {
font-size:14px;
color:#000;
font-weight: 100;
font-family:tahoma;
padding: 20px;
background-color:rgba(25, 255, 255, 0.3);
margin: 0 auto;
width:60%;
margin-bottom:20px;
float: right;
position:relative;
box-sizing:border-box;
}

＆＃13;

<div id="wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>

＆＃13;

Answer 2

发生这种情况是因为你的填充：20px; padding属性会为你的div添加额外的空间。在下面的代码我只是评论它并且它正在工作。当您使用百分比和像素操作时，可以使用** calc() **来调整宽度值，如下所示。

#wrapper {
	margin: 0 auto;
	background:none;
	width:90%;
}
.content {
	/*top: 0;
	left:0;*/
	font-size:14px;
	color:#000;
	font-weight: 100;
	font-family:tahoma;
	padding: 20px;
	background-color:rgba(255, 255, 255, 0.3);
	margin: 0 auto;
	width:calc(40% - 40px);
	margin-bottom:20px;
	float: left;
	position:relative;
  background-color:red;
}

.sidebar {
	/*top: 0;
	left:0;*/
	font-size:14px;
	color:#000;
	font-weight: 100;
	font-family:tahoma;
	padding: 20px;
	background-color:rgba(255, 255, 255, 0.3);
	margin: 0 auto;
	width:calc(60% - 40px);
	margin-bottom:20px;
	float: left;
	position:relative;
    background:yellow;
}
.header {
	width: calc(100% - 40px);
	background-color:rgba(255, 255, 255, 0.5);
	margin: 0 auto;
	padding: 20px;
	margin-top:-10px;
}

<div id="wrapper">
	<div class="header">
	<h1>Title Here </h1>

	
	<ul class="topnav" id="myTopnav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Icons</a></li>
  <li><a href="#">Wallpapers</a></li>
  <li><a href="#">Textures</a></li>
  <li><a href="#">Stock Photos</a></li>
  <li><a href="#">Contact</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
	</ul>
	<script>
	function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
	
	</div>
	
	
	<div class="content">
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>

<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>

<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>

<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>

<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
	
	</div>
	
	<div class="sidebar">
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>

<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>

<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>

<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>

<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
	
	</div>

</div>

Answer 3

你可以在css中尝试这个技巧 calc（）。如果您使用填充：20px 属性，则div宽度将增加（20x2）px ，因此我们可以减少40px的增加宽度，如calc（40％ - 40px）。希望能帮助你。

#wrapper {
	margin: 0 auto;
	background:none;
	width: 90%;
}
.content {
	top: 0;
	left:0;
	font-size:14px;
	color:#000;
	font-weight: 100;
	font-family:tahoma;
	padding: 20px;
	background-color:rgba(0, 0, 0, 0.3);
	margin: 0 auto;
	width: calc(40% - 40px);
	margin-bottom:20px;
	float: left;
	position:relative;
}
.sidebar {
	top: 0;
	left:0;
	font-size:14px;
	color:#000;
	font-weight: 100;
	font-family:tahoma;
	padding: 20px;
	background-color:rgba(0, 0, 0, 0.1);
	margin: 0 auto;
	width:calc(60% - 40px);
	margin-bottom:20px;
	float: right;
	position:relative;
}
.header {
	width: 100%;
	background-color:rgba(255, 255, 255, 0.5);
	margin: 0 auto;
	padding: 20px;
	margin-top:-10px;
	box-sizing: border-box;
}

<div id="wrapper">
	<div class="header">
		<h1>Title Here </h1>
		<ul class="topnav" id="myTopnav">
		  <li><a href="#">Home</a></li>
		  <li><a href="#">Blog</a></li>
		  <li><a href="#">Icons</a></li>
		  <li><a href="#">Wallpapers</a></li>
		  <li><a href="#">Textures</a></li>
		  <li><a href="#">Stock Photos</a></li>
		  <li><a href="#">Contact</a></li>
		  <li class="icon">
		    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
		  </li>
		</ul>
	</div>
	
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
		<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
		<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
		<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
		<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
	</div>
	
	<div class="sidebar">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam maximus vitae lectus vel pharetra. Suspendisse potenti. Pellentesque ornare et magna porta semper. Morbi eget risus ut sem ultrices vestibulum vel posuere massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in luctus diam. Vestibulum at libero sapien. Praesent cursus rhoncus nibh, et ullamcorper neque aliquet tempus. Morbi at luctus nisl. Nunc scelerisque sit amet urna nec malesuada.</p>
		<p>Aliquam tempor porta tristique. Donec laoreet iaculis odio in volutpat. Nam lacus leo, cursus in sem eu, sodales ultricies sapien. Ut tincidunt faucibus ligula, in tempus ante pellentesque sit amet. Donec id pellentesque sapien. Nulla feugiat blandit aliquet. Praesent a dui libero.</p>
		<p>Phasellus ac purus pretium, imperdiet dui eget, eleifend sem. Etiam ac justo ac lorem ultricies venenatis. Proin porta eget nunc sed maximus. Phasellus ornare dictum purus, nec rhoncus tellus suscipit at. Suspendisse a convallis tellus, a tincidunt odio. Curabitur in augue eu arcu sodales rutrum. Sed erat ipsum, accumsan nec laoreet in, vulputate et metus. Ut posuere diam purus, mattis varius dolor eleifend bibendum. Aenean pharetra euismod felis sit amet porta.</p>
		<p>Phasellus rhoncus malesuada justo id viverra. Pellentesque sagittis sollicitudin lorem mattis malesuada. Maecenas vehicula vestibulum rhoncus. Etiam auctor dapibus ipsum. Nam eleifend aliquet dui et laoreet. Aenean convallis nec sem sit amet commodo. Donec nibh ipsum, lacinia eget mollis nec, facilisis in sem.</p>
		<p>Aenean ac finibus metus, nec sollicitudin ex. In hac habitasse platea dictumst. Proin iaculis dolor et velit facilisis, sed tristique turpis facilisis. Nunc purus lorem, scelerisque non est sed, iaculis fringilla lorem. Vestibulum a tempor est. Aenean semper nibh erat, et dignissim quam fringilla quis. Duis euismod tristique fringilla. Etiam sed lobortis nisi. Aliquam quis velit vehicula, dapibus dui quis, elementum mi. Nullam ultricies, neque sit amet suscipit tempor, sapien libero condimentum risus, eget posuere enim lorem eu lacus. Nunc pulvinar arcu sit amet tellus finibus sodales.</p>
	</div>
</div>

两个div并排显示百分比宽度

3 个答案: