如何将三个div合二为一，以便分享背景？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何将三个div合二为一，以便分享背景？相关的知识，希望对你有一定的参考价值。
我正在创建一个小网站，我创建了divs，但现在我有一个问题，我有一个div“标题”，旁边那个，我有两个div并排，我想在一个容器中包装3个div 。
我尝试了一些我看过的东西，但直到现在还不是我想要的东西。
body {
margin: 0;
width:100%;
}
body > div {
height: 200px;
padding: 50px;
}
.header {
background-color: grey;
height: 50px;
color: white;
}
.product {
margin-top:0px;
height: 500px;
background-color: red;
color: white;
float:left;
width:50%;
margin:0;
padding:0;
}
.product2 {
height: 500px;
margin-top:0px;
background-color: blue;
color: white;
width:50%;
float:left;
margin:0;
padding:0;
}
.crew {
clear:both;
background-color: tomato;
color: darkgrey;
}
.tour {
background-color: black;
color: darkgrey;
}
.pricing {
background-color: gold;
color: black;
}
.contact {
background-color: black;
color: white;
}
.menu{
margin-top: 4%;
margin-right: 5%;
font-size: 18px;
list-style:none;
float: right;
}
.menu li{
display:inline;
float:left;
}
.menu li a{
color:blue;
text-decoration:none;
padding:6px 23px;
display:block;
}
.menu li a:hover{
background-color:none;
color:red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" type="text/css" >
<title> Layout </title>
</head>
<body>
<div class="header">
<img src="logo.png">
<ul class="menu">
<li><a href="#">Home </a> </li>
<li><a href="#">Product Tour </a> </li>
<li><a href="#">Pricing </a> </li>
<li><a href="#">Try </a></li>
<li><a href="#">Vision</a></li>
</ul>
</div>
<div class="product">
</div>
<div class="product2">
</div>
<div class="crew">
</div>
<div class="tour">
</div>
<div class="pricing">
</div>
<div class="contact">
</div>
</body>
</html> 如何将前3个div分成一个？
答案
请编辑您的CSS，如下所示。您将根据需要获得设计。祝一切顺利
.menu {
float: right;
font-size: 18px;
list-style: outside none none;
margin-top: 10px;
}
.menu li a {
color: blue;
display: block;
text-decoration: none;
}
.menu li {
display: inline;
float: left;
padding-right: 23px;
}
另一答案
如果你想为很多对象设置背景，你可以：1。给它们所有相同的类而不是id，例如
<div class="divclass" id="div1"></div>
<div class="divclass" id="div1"></div>
<div class="divclass" id="div1"></div>
要么
2.将它们全部包裹在一个div中，只需将它们放入div标签两侧，例如
<div id="bigdiv">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
- 样式body标签（在css中） 身体{背景：红色; }
希望这可以帮助
另一答案
使用display:inline-block底部product和product2 div并在另一个主div中添加前3 div。
HTML：
<div class="main">
<div class="header">
<img src="logo.png"/>
<ul class="menu">
<li><a href="#">Home </a> </li>
<li><a href="#">Product Tour </a> </li>
<li><a href="#">Pricing </a> </li>
<li><a href="#">Try </a></li>
<li><a href="#">Vision</a></li>
</ul>
</div>
<div class="sub">
<div class="product">
</div>
<div class="product2">
</div>
</div>
</div>
检查Fiddle
以上是关于如何将三个div合二为一，以便分享背景？的主要内容，如果未能解决你的问题，请参考以下文章