Question

＆＃13;

.center {
    text-align: center;
}

.box1 {
  display: inline-block;
  width: 30%;
  margin-left:10%;
  clear: both;
  height: 30%
}

#img1 {
    padding: 5%
}

＆＃13;

<div class="center">
    <div class="box1">
        <img id="img1" src="http://i.imgur.com/D5T6lY1.png" />
    </div>
    <div class="box1">
        <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
        <div class="rounded-button"> 
            <a href="lavu.com" style="text-decoration: none">live demo<img id="terminal_icon" src="http://i.imgur.com/ZrCANdq.png"/>     </a>
        </div>
    </div>
</div>

＆＃13;

我正在尝试制作一个div，其中包含2个其他div。
我希望这两个div在页面上居中。

问题
当我减小页面宽度时，我无法阻止它们重叠。
我希望内部的2个div能够＆＃34;清除＆＃34; 而不是重叠（也是完全响应）。
我似乎无法实现这种效果。

有任何建议吗？

Answer 1

您可以在css中处理图像大小调整，以防止重叠：

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

您可能需要调整结果才能在更改分辨率时获得所需的效果。

Answer 2

强迫.box1的孩子尊重与父母的关系

.box1 > * {
  max-width: 100%;
}

.center {
    text-align: center;
}

.box1 {
  display: inline-block;
  width: 30%;
  margin-left:10%;
  clear: both;
  height: 30%
}

.box1 > * {
  max-width: 100%;
}

#img1 {
    padding: 5%
}

<div class="center">
    <div class="box1">
        <img id="img1" src="http://i.imgur.com/D5T6lY1.png" />
    </div>
    <div class="box1">
        <p style="text-align:left">Choosing a new Point of Sale (POS) is an opportunity. Lavu is not just accepting payments - Lavu is business management on the iPad. Upgrade your business with the Cloud POS system that was developed specifically for the restaurant / hospitality industry. Lavu has the tools you need to improve efficiency and the bottom line. Love your business.</p>
        <div class="rounded-button"> 
            <a href="lavu.com" style="text-decoration: none">live demo<img id="terminal_icon" src="http://i.imgur.com/ZrCANdq.png"/>     </a>
        </div>
    </div>
</div>

Answer 3

我会使用一个框架。我最熟悉的是Twitter Bootstrap。这就是你的问题使用它的简单程度：

<div class="container-fluid"> // Create a full-width container
  <div class="row">
    <div class="col-xs-6"> // 50% Width of the row, made up of 12 Columns
      <img src="..."/>
    </div>
    <div class="col-xs-6">
      <p>Info text about POS System.</p>
    </div>
  </div>
</div

它会完成。一个容器，根据浏览器宽度的大小调整大小，该容器居中且不重叠。

不幸的是，这也是一个基于意见的问题，我没有使用基本CSS的好解决方案。

希望这能为您提供一些见解。框架可以让您的生活变得简单，并提供易于使用的投诉HTML / CSS布局。

干杯！

Answer 4

您可以使用@media查询来提高响应速度，以下jsfiddle演示了如何应用您的代码：http://jsfiddle.net/zb6xbf8m

@media查询中指定的'min-width'和'max-width'属性都是我根据两个div的内容维度定义的值。

我的div重叠了。我希望他们能够并排，但也要敏感

4 个答案: