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％）时移动到下一行。我试图使内容类和右类相对的位置，但它不起作用。有什么方法可以解决这个问题吗？

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

你应该添加word-break：break-all;到.right班。

像这样：

＆＃13;

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

＆＃13;

<!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>

＆＃13;

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

2 个答案: