gpt4 book ai didi

html - 我可以限制元素相对于其父元素的宽度吗?

转载 作者:行者123 更新时间:2023-11-28 07:39:56 25 4
gpt4 key购买 nike

<!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 像素),所以我希望 div 右侧的段落在超过内容宽度的 23.752%(显示器的 67.652%)时移动到下一行。我试图使内容类和右类的位置相对,但它不起作用。有什么办法可以解决这个问题吗?

最佳答案

你应该添加分词:break-all;到.right类。

像这样:

 *{
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>

关于html - 我可以限制元素相对于其父元素的宽度吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30998576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com