为并排HTML文本与图片元素加padding后布局错乱的解决咨询

问题出在CSS默认的盒模型规则：默认情况下，元素设置的width仅代表内容区域的宽度，padding会额外增加元素的总宽度。你给左侧div设了width:50%再加padding:20px后，总宽度变成了50% + 40px（左右各20px），超过了父容器的一半，自然会挤掉右侧图片的位置，导致布局错乱。

下面是三种可行的解决方法：

方法1：使用box-sizing: border-box（推荐） #

这个属性能让元素的padding和border都包含在设置的width内，不会额外拓展总宽度，是最省心的方案：

<!DOCTYPE html>
<html>
<body>
  <div style="width: 50%; float: left; padding:20px; box-sizing: border-box;">
    <h2> What We Do</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
  </div>

  <div style="margin-left:50%; ">
    <img style="max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
  </div>
</body>
</html>

方法2：嵌套内层div添加内边距 #

保持外层div的宽度和浮动属性不变，在里面嵌套一个新div，给内层div加padding，这样外层的宽度不会被内边距影响：

<!DOCTYPE html>
<html>
<body>
  <div style="width: 50%; float: left;">
    <div style="padding:20px;">
      <h2> What We Do</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
    </div>
  </div>

  <div style="margin-left:50%; ">
    <img style="max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
  </div>
</body>
</html>

方法3：手动调整宽度（不推荐） #

用calc()计算宽度，把设置的width减去padding的总宽度，比如左右各20px就减40px，但这种方法需要精确计算，适配不同屏幕时灵活性差：

<!DOCTYPE html>
<html>
<body>
  <div style="width: calc(50% - 40px); float: left; padding:20px;">
    <h2> What We Do</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.</p>
  </div>

  <div style="margin-left:50%; ">
    <img style="max-width: 100%; height: auto;" src="https://images.designtrends.com/wp-content/uploads/2016/04/06094112/Beautiful-Mountain-HD-Backgrounds.jpg">
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Shanmukha