Question

我正在创建一个小网站，我创建了div但现在我有一个问题，我有一个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 &nbsp;&nbsp;&nbsp;</a> </li>
        <li><a href="#">Product Tour&nbsp;&nbsp;&nbsp;</a> </li>
        <li><a href="#">Pricing&nbsp;&nbsp;&nbsp;</a> </li>
        <li><a href="#">Try&nbsp;&nbsp;&nbsp;&nbsp;</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分成一个？

Answer 1

请编辑您的css，如下所示。您将根据需要获得设计。一切顺利

current()

Answer 2

如果要为许多对象设置背景，您可以： 1.给他们所有相同的课程，而不是一个例如。

StockOutward

或

2.将它们全部包裹在一个div中，只需将它们放在div标签的两侧例如

<div class="divclass" id="div1"></div> <div class="divclass" id="div1"></div> <div class="divclass" id="div1"></div>

设置body标签的样式（在css中）

body { 背景：红色; }

希望这有帮助

Answer 3

将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 &nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Product Tour&nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Pricing&nbsp;&nbsp;&nbsp;</a> </li>
    <li><a href="#">Try&nbsp;&nbsp;&nbsp;&nbsp;</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合二为一，以便分享背景？

3 个答案: