CSS：width属性不适用于div标签

Question

I am trying to create a Product catalog. 我正在尝试创建产品目录。 I have planned to create multiple rows whereas in each row there would be 2 products each. 我计划创建多行，而每行中将各有2种产品。

Thus in each row the 1st product belongs to product-1 class and 2nd product belongs to product - 2 class. 因此，在每一行中，第一产品属于产品1类，第二产品属于产品2类。

I have divided the page vertically into two parts using float:left and specified width:50% for both classes. 我将两个类都使用float:left和指定width:50%垂直将页面分为两部分。

And also for product-2 class I have specified left:50% (to push it to left) 对于产品2类，我还指定了left:50% （将其向左推）

I have kept display:block , position:relative for both classes. 我对两个类都保持display:block ， position:relative 。

But the width property seems to not be working. 但是width属性似乎不起作用。

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

Code Snippet: 代码段：

 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

The width in .product-2 does does not visibly work because of the left: 50% property you have assigned to it. 该width的.product-2并不会明显，因为工作的left: 50%财产已分配给它。 If you remove that, then assigning a width to .product-2 will work. 如果将其删除，则可以为.product-2分配width 。

I have added a <div class="row"> to each of your division to distinctly divide them as a row. 我为您的每个部门添加了<div class="row"> ，以将它们明确地划分为一行。 I assigned float-right to .product-2 and a sample width of 200px so you can see the width working. 我为.product-2指定了float-right ，并指定了200px的示例width ，因此您可以看到该width有效。 Hope this answers your question, good luck 希望这能回答您的问题，祝您好运

 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/ https://jsfiddle.net/Sampath_Madhuranga/0pfygcbe/23/

This works fine. 这很好。 Let me know if there is any problem. 让我知道是否有任何问题。 Thanks 谢谢

CSS：width属性不适用于div标签

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-08-19 12:11:15

解决方案2
1 2018-08-19 12:42:04

CSS：width属性不适用于div标签

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-08-19 12:11:15

解决方案2 1 2018-08-19 12:42:04

解决方案1
1 已采纳 2018-08-19 12:11:15

解决方案2
1 2018-08-19 12:42:04