时间戳

首页 > 解决方案 > CSS：宽度属性不适用于 div 标签

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

问题描述

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

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

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

而且对于我指定的product-2类left:50%（将其推向左侧）

我一直保持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>

标签： htmlcsswidth

解决方案

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/0p​​fygcbe/23/

这工作正常。让我知道是否有任何问题。谢谢

推荐阅读