移动版宽度设定问题

WormJan 2018-02-11 11:44:03

比如这个东西：

整个分为三部分，上中下。
上面的左边是一张图片（左漂），即右边是三行，标题、作者、时间
中间是简介。
下面就是赏、评、赞、藏。

我的问题是：上面部分，我想先分为2大部分，即左图片和右边一个DIV，然后右边的DIV中再分三行显示（或者用三个DIV）
那么，假设图片宽度固定，那么右边的DIV，该设置多大呢？我试了一下百分比，发现不同大小屏幕的手机会有区别。5.5和5.7的屏幕，会有大概一个字母的大小之差。怎样设置右边的DIV的宽度才合适呢。

谢谢

...全文

427 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2018-02-12

打赏
举报


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
body {
	margin: 0;
}

.l {
	width: 100px;
	height: 100px;
	background-color: #666;
	float: left;
}
.r {
	width: auto;
	height: 100px;
	background-color: #999;
}
.r div {
	height: 31px;
	border: 1px solid #00f;
}
</style>
</head>
<body>

<div class="l"></div>
<div class="r">
	<div></div>
	<div></div>
	<div></div>
</div>

</body>
</html>

WormJan 2018-02-12

打赏
举报

引用 1 楼 jslang 的回复:


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
body {
	margin: 0;
}

.l {
	width: 100px;
	height: 100px;
	background-color: #666;
	float: left;
}
.r {
	width: auto;
	height: 100px;
	background-color: #999;
}
.r div {
	height: 31px;
	border: 1px solid #00f;
}
</style>
</head>
<body>

<div class="l"></div>
<div class="r">
	<div></div>
	<div></div>
	<div></div>
</div>

</body>
</html>

谢谢了