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

Question

<!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 像素中的 1082px）的网站，所以我希望 div 上的段落在超过内容宽度的 23.752%（67.652 % 显示器）。我试图使内容 class 和右侧 class 的位置相对，但它不起作用。有什么办法可以解决这个问题吗？

Answer 1

您想要的是非常简单。首先假设您希望它移动到下一行文本，如果它可能是父级宽度的 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。

Answer 2

你应该添加分词：break-all； .right class.

像这样：

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

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

Can I limit the width of element relative to its parent?

html

css

liquid-layout