可以限制元素相对于其父元素的宽度吗？
可以限制元素相对于其父元素的宽度吗？
提问于 2015-06-23 09:11:54
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>KPMG HTML5 TEST</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="m5.css">
</head>
<body>
<div class="content">
<header class="header">
<p>testing for responsiveness</p>
</header>
<div class="nav">
<p>testing for responsiveness</p>
</div>
<div class="upper_left">
<p>testing for responsiveness</p>
</div>
<div class="upper_right">
<p>testing for responsiveness</p>
</div>
<div class="left">
<p>testing for responsiveness</p>
</div>
<div class="center">
<p>testing for responsiveness</p>
</div>
<div class="right">
<p>testing for responsivenedddddddddddddddddddddddddddddddsssssssssssssSSSSSSSSss</p>
</div>
<footer class="footer">
<p>testing for responsiveness</p>
</footer>
</div>
</body>
</html>我正在努力创建一个具有响应性网页设计的网站。这是我的CSS文件。
*{
box-sizing: border-box;
}
.content{
width:67.625%;
position: relative;
}
.upper_left,.left{
float:left;
}
.upper_right,.center, .right{
float:left;
margin-left: 1.663586%; /*18px*/
}
.upper_left{
width:74.5841%;
}
.upper_right{
width:23.752311%;
}
.left{
width:23.752311%;
}
.center{
width:49.168207%;
}
.right{
width:23.752311%;
position: relative;
}因为我想要创建一个宽度仅为67.625%的网站(1600年中的1082 it )，所以我希望在div上的段落超过内容的23.752% (监视器的67.652%)时移到下一行。我试图使内容类和正确类的位置相对，但它不起作用。有什么办法可以解决吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-23 09:24:14
您应该在.right类中添加单词分隔符:break；。
如下所示：
*{
box-sizing: border-box;
}
.content{
background:#eee;
width:67.625%;
position: relative;
}
.upper_left,.left{
float:left;
background:#ddd;
}
.upper_right,.center, .right{
float:left;
margin-left: 1.663586%; /*18px*/
background:#ccc;
}
.upper_left{
width:74.5841%;
}
.upper_right{
width:23.752311%;
}
.left{
width:23.752311%;
}
.center{
width:49.168207%;
}
.right{
width:23.752311%;
position: relative;
word-break: break-all;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<title>KPMG HTML5 TEST</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="content">
<header class="header">
<p>testing for responsiveness</p>
</header>
<div class="nav">
<p>testing for responsiveness</p>
</div>
<div class="upper_left">
<p>testing for responsiveness</p>
</div>
<div class="upper_right">
<p>testing for responsiveness</p>
</div>
<div class="left">
<p>testing for responsiveness</p>
</div>
<div class="center">
<p>testing for responsiveness</p>
</div>
<div class="right">
<p>testing for responsivenedddddddddddddddddddddddddddddddsssssssssssssSSSSSSSSss</p>
</div>
<footer class="footer">
<p>testing for responsiveness</p>
</footer>
</div>
</body>
</html>
Stack Overflow用户
发布于 2015-06-23 09:17:32
您想要的是非常简单的。首先，假设您希望它移动到下一行文本，如果它可能是家长宽度的50%。您可以在CSS中使用属性max-width。下面是一个示例：
HTML
----------
<div id="parent">
<div id="child">
This text will eventually overflow.
</div>
</div>
CSS
----------
#parent {
width: 500px;
height: 100px;
background-color: red;
}
#child {
max-width: 50%; /* 50% is the width used for the example */
}因此，正如您所看到的，max-width可以为您实现这一点。如果你愿意的话，我给你发了一个JSFiddle。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30998576
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号