CSS：宽度属性不适用于 div 标签

Question

我正在尝试创建产品目录。我计划创建多行，而每行各有 2 个产品。

因此在每一行中，第一个产品属于产品-1 class，第二个产品属于产品 - 2 class。

我使用 float:left 将页面垂直分为两部分，并为两个 class 指定了 width:50%。

还有 product-2 class 我指定了 left:50%（将它推到左边）

我为两个 class 都保留了 display:block 和 position:relative。

但是 width 属性似乎不起作用。

代码：https://jsfiddle.net/abhaygc/0pfygcbe/

代码片段：

body{
  height: 100vh;
  margin: 0px;
  overflow: scroll;
 }
.header{

  background-color: white;
  height:8%;
  overflow: hidden;
  font-style: "Roboto";
  font-size: 25px;
  border-bottom: 2px solid;
  border-bottom-color: #cccccc;
}
#clear{
  clear: both;
 }
.logo{
 margin-top: 12px;
 float: left;
 left: 0px;
 padding-right: 50px;
}
#logo:hover{
 background: transparent;
}
.links{
 display: block;
 float: right;
 margin-right: 10px;
 margin-top: 10px;
}
a{
 position: relative;
 right: 0px;
 /*top: 25px;*/

 padding-left: 10px;
 padding-right: 10px;

 color:black;
 letter-spacing: 2px;
 font-weight: 200;
 text-decoration: none;
}
a:hover{
 background-color:#cccccc; 
}

.content{
 display: block;
 background-color: white;
 height: 92%;
 margin-top: 0px;

}

#clear{
 clear: both;
}

.image{
 display: block;
 width: 200px;
 height: 200px;
 border-style: dashed;
 border-color: red;
 border-width: 2px;
 overflow: hidden;
}

.product-1{
 display: block;
 position: relative;
 
 padding-left: 10%;
 padding-right: 10%;
 
 
 margin-top: 5%;
 
 float: left;
 left: 0px;
 width: 40%;
 overflow: hidden;

 border-style: solid;
 border-color: black;
 border-width: 1px;
}

.product-2{
 display: block;
 position: relative;


 padding-left: 10%;
 padding-right: 10%;

 
 margin-top: 5%;

 float: left;

 left: 50%;
 width: 50%;
 overflow: hidden;

 border-style: solid;
 border-color: black;
 border-width: 1px;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
 <link rel="stylesheet" type="text/css" href="products.css">
 <title>Products</title>
</head>
<body>
 <div class="header">
  <div class="logo">
   <a href="home.html"><img id="logo"src="logo.png" alt="LOGO"></a>
  </div>
  <div class="links">   
   <a href="home.html">Home</a>
   <a href="products.html">Products</a>
   <a href="login.html">Login</a>
   <a href="register.html">Register</a>
   <a href="home.html">Contact</a>
   <a href="home.html">About</a>
  </div>
 </div>
 <div class="content">
  <div class="product-1 product">
   <div class="image">
     <img src="slide-4.jpg" alt="Image 1" />
   </div>
   <div class="caption">
    
   </div>
  </div>

  

  <div class="product-2 product">
   <div class="image">
     <img src="slide-5.jpg" alt="Image 2"/>
   </div>
   <div class="caption">
    
   </div>
  </div>

  <div id="clear"></div>

  <div class="product-1 product">
   <div class="image">
     <img src="slide-6.jpg" alt="Image 3"/>
   </div>
   <div class="caption">
    
   </div>
  </div>

  <div class="product-2 product">
   <div class="image">
     <img src="slide-5.jpg" alt="Image 4"/>
   </div>
   <div class="caption">
    
   </div>
  </div>

 </div>
</body>
<script type="text/javascript" src="products.js"></script>
</html>

Answer 1

.product-2 中的 width 不会 visibly 工作，因为你分配给它的 left: 50% 属性 .如果你删除它，那么将 width 分配给 .product-2 将起作用。

我已经为你的每个部门添加了一个 <div class="row"> 以明确划分它们作为一排。我将 float-right 分配给 .product-2 和 200px 的示例 width，因此您可以看到 width 正在工作。希望这能回答你的问题，祝你好运

body{
  height: 100vh;
  margin: 0px;
  overflow: scroll;
 }
.header{

  background-color: white;
  height:8%;
  overflow: hidden;
  font-style: "Roboto";
  font-size: 25px;
  border-bottom: 2px solid;
  border-bottom-color: #cccccc;
}
#clear{
  clear: both;
 }
.logo{
 margin-top: 12px;
 float: left;
 left: 0px;
 padding-right: 50px;
}
#logo:hover{
 background: transparent;
}
.links{
 display: block;
 float: right;
 margin-right: 10px;
 margin-top: 10px;
}
a{
 position: relative;
 right: 0px;
 /*top: 25px;*/

 padding-left: 10px;
 padding-right: 10px;

 color:black;
 letter-spacing: 2px;
 font-weight: 200;
 text-decoration: none;
}
a:hover{
 background-color:#cccccc; 
}

.content{
 display: block;
 background-color: white;
 height: 92%;
 margin-top: 0px;

}

#clear{
 clear: both;
}

.image{
 display: block;
 width: 200px;
 height: 200px;
 border-style: dashed;
 border-color: red;
 border-width: 2px;
 overflow: hidden;
}

.product-1{
 display: block;
 position: relative;
 
 padding-left: 10%;
 padding-right: 10%;
 
 margin-top: 5%;
 
 float: left;
 left: 0px;
 width: 175px; /* sample width */
 overflow: hidden;

 border-style: solid;
 border-color: black;
 border-width: 1px;
}

.product-2{
 display: block;
 position: relative;

 padding-left: 10%;
 padding-right: 10%;

 margin-top: 5%;
 float: right;
 width: 175px; /* sample width */
 overflow: hidden;

 border-style: solid;
 border-color: black;
 border-width: 1px;
}

<body>
 <div class="header">
  <div class="logo">
   <a href="home.html"><img id="logo"src="logo.png" alt="LOGO"></a>
  </div>
  <div class="links">   
   <a href="home.html">Home</a>
   <a href="products.html">Products</a>
   <a href="login.html">Login</a>
   <a href="register.html">Register</a>
   <a href="home.html">Contact</a>
   <a href="home.html">About</a>
  </div>
 </div>
 <div class="content">
                <div class="row">
  <div class="product-1 product">
   <div class="image">
     <img src="slide-4.jpg" alt="Image 1" />
   </div>
   <div class="caption">
    
   </div>
  </div>

  

  <div class="product-2 product">
   <div class="image">
     <img src="slide-5.jpg" alt="Image 2"/>
   </div>
   <div class="caption">
    
   </div>
  </div>
                </div>

  <div id="clear"></div>

                <div class="row">
  <div class="product-1 product">
   <div class="image">
     <img src="slide-6.jpg" alt="Image 3"/>
   </div>
   <div class="caption">
    
   </div>
  </div>

  <div class="product-2 product">
   <div class="image">
     <img src="slide-5.jpg" alt="Image 4"/>
   </div>
   <div class="caption">
    
   </div>
  </div>
                </div>

 </div>
</body>

Answer 2

body{
  height: 100vh;
  margin: 0px;
  overflow: scroll;
 }
.header{

  background-color: white;
  height:8%;
  overflow: hidden;
  font-style: "Roboto";
  font-size: 25px;
  border-bottom: 2px solid;
  border-bottom-color: #cccccc;
}
#clear{
  clear: both;
 }
.logo{
 margin-top: 12px;
 float: left;
 left: 0px;
 padding-right: 50px;
}
#logo:hover{
 background: transparent;
}
.links{
 display: block;
 float: right;
 margin-right: 10px;
 margin-top: 10px;
}
a{
 position: relative;
 right: 0px;
 /*top: 25px;*/

 padding-left: 10px;
 padding-right: 10px;

 color:black;
 letter-spacing: 2px;
 font-weight: 200;
 text-decoration: none;
}
a:hover{
 background-color:#cccccc; 
}

.content{
 display: block;
 background-color: white;
 height: 92%;
 margin-top: 0px;

}

#clear{
 clear: both;
}

.image{
 display: block;
 width: 200px;
 height: 200px;
 border-style: dashed;
 border-color: red;
 border-width: 2px;
 overflow: hidden;
  margin: 0 auto;
}

.product-1{
 display: block;
    position: relative;
    /* padding-left: 10%; */
    /* padding-right: 10%; */
    margin-top: 5%;
    float: left;
    /* left: 0px; */
    width: 40%;
    overflow: hidden;
    border-style: solid;
    border-color: black;
    border-width: 0;
    margin: 0 5%;
    margin-top: 15px;
    box-sizing: border-box;
    border-width:1px;
}

.product-2{
 display: block;
    position: relative;
    /* padding-left: 10%; */
    /* padding-right: 10%; */
    /* margin-top: 15px; */
    float: left;
    /* left: 50%; */
    width: 40%;
    overflow: hidden;
    border-style: solid;
    border-color: black;
    border-width: 0;
    margin: 0 5%;
    margin-top: 15px;
    box-sizing: border-box;
    border-width:1px;
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
 <link rel="stylesheet" type="text/css" href="products.css">
 <title>Products</title>
</head>
<body>
 <div class="header">
  <div class="logo">
   <a href="home.html"><img id="logo"src="logo.png"></a>
  </div>
  <div class="links">   
   <a href="home.html">Home</a>
   <a href="products.html">Products</a>
   <a href="login.html">Login</a>
   <a href="register.html">Register</a>
   <a href="home.html">Contact</a>
   <a href="home.html">About</a>
  </div>
 </div>
 <div class="content">
  <div class="product-1 product">
   <div class="image">
     <img src="slide-4.jpg" alt="Image 1" />
   </div>
   <div class="caption">
    
   </div>
  </div>

  

  <div class="product-2 product">
   <div class="image">
     <img src="slide-5.jpg" alt="Image 2"/>
   </div>
   <div class="caption">
    
   </div>
  </div>

  <div id="clear"></div>

  <div class="product-1 product">
   <div class="image">
     <img src="slide-6.jpg" alt="Image 3"/>
   </div>
   <div class="caption">
    
   </div>
  </div>

  <div class="product-2 product">
   <div class="image">
     <img src="slide-5.jpg" alt="Image 4"/>
   </div>
   <div class="caption">
    
   </div>
  </div>

 </div>
</body>
<script type="text/javascript" src="products.js"></script>
</html>

https://jsfiddle.net/Sampath_Madhuranga/0pfygcbe/23/

这很好用。如果有任何问题，请告诉我。谢谢

CSS：宽度 属性 不适用于 div 标签

CSS: width property is not working for div tags

html

css

width

CSS：宽度属性不适用于 div 标签