搜索
搜索

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

Abhay 发表于 Dev
62
阿拜

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

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

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

还有我指定的产品 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>

95faf8e76605e973

将width在.product-2不不可见的工作，因为的left: 50%财产已分配给它。如果您删除它，则分配一个widthto.product-2将起作用。

我<div class="row">在您的每个部门中添加了一个，以将它们清楚地划分为一行。我分配float-right了.product-2一个样本width，200px这样你就可以看到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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS：@media 查询的最大宽度不适用于某些 div 标签

CSS 适用于自定义标签但不适用于 DIV？

css 属性不适用于 div

理解为什么纯CSS视差效果适用于div，但不适用于body标签吗？

CSS 宽度不适用于 HTML 选择标签

截断样式不适用于<a>标签，但适用于<div>和<p>标签

Javascript element.click() 不适用于 div 标签

get_text 不适用于 div 标签

Div标签居中不适用于jQuery

CSS 过渡不适用于 <a> 标签

不适用于CSS的div

基本CSS不适用于div

CSS不适用于页脚div

css 不适用于 div

CSS不适用于div元素

使用CSS在div中自动调整图像大小仅适用于宽度，不适用于高度

使用 Bootstrap 折叠类不适用于多个 div 标签

CSS宽度和高度不适用于带有display：inline的div

CSS - 固定 div 元素的最大宽度不适用于填充

100％的宽度不适用于div。WordPress的

文本对齐属性不适用于跨度标签

所选属性不适用于选择标签上的[（ngModel）]

为什么css不适用于锚标签？

为什么浮动标签不适用于CSS

React 外部 CSS 不适用于部分标签

过渡不适用于CSS中悬停的“ img”标签

img标签类不适用于对应的CSS文件

CSS 溢出-y:scroll; 适用于 chrome 但不适用于 html 标签的边缘

div标签的宽度

TOP 榜单

  1. 1

    Linux的官方Adobe Flash存储库是否已过时？

  2. 2

    如何使用HttpClient的在使用SSL证书，无论多么“糟糕”是

  3. 3

    错误：“ javac”未被识别为内部或外部命令，

  4. 4

    Modbus Python施耐德PM5300

  5. 5

    为什么Object.hashCode（）不遵循Java代码约定

  6. 6

    如何正确比较 scala.xml 节点？

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    在令牌内联程序集错误之前预期为 ')'

  9. 9

    数据表中有多个子行，asp.net核心中来自sql server的数据

  10. 10

    VBA 自动化错误：-2147221080 (800401a8)

  11. 11

    错误TS2365：运算符'！=='无法应用于类型'“（”'和'“）”'

  12. 12

    如何在JavaScript中获取数组的第n个元素？

  13. 13

    检查嵌套列表中的长度是否相同

  14. 14

    如何将sklearn.naive_bayes与（多个）分类功能一起使用？

  15. 15

    ValueError：尝试同时迭代两个列表时，解包的值太多（预期为 2）

  16. 16

    ES5的代理替代

  17. 17

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

  18. 18

    如何监视应用程序而不是单个进程的CPU使用率？

  19. 19

    如何检查字符串输入的格式

  20. 20

    解决类Koin的实例时出错

  21. 21

    如何自动选择正确的键盘布局？-仅具有一个键盘布局

热门标签

归档