Question

我有两个div占据了屏幕的一半。当我在第二个div中添加一个p标签时，它会将其拉下来。为什么会这样？我创建了一个html电子邮件，所以我只能使用内联样式，不能使用网格系统引用外部样式表。

以下是一个示例：https://jsfiddle.net/jzcxhp2L/1/

<div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;"></div>
  <div style="display: inline-block; width: 49%; height: 300px; border: 1px solid black;">
    <p>Lorem ipsum dolor</p>
  </div>
</div>

Answer 1

只需向其添加float:left;并添加您想要的margin值即可。

    <div>
        <div style="display: inline-block; float: left; margin: 5px; width: 49%; height: 300px; border: 1px solid black;"></div>
        <div style="display: inline-block;float: left;margin: 5px; width: 49%; height: 300px; border: 1px solid black;">
            <p>Lorem ipsum dolor</p>
        </div>
    </div>

Answer 2

将float:left;添加到您的样式中。此外，如果您要分配一些边框，最好使用box-sizing:border-box;这不会让边框影响元素宽度。

希望这有帮助

Answer 3

<p>是一个块元素，您将其嵌套在内联元素中。这不应该发生，并导致布局问题。块元素将创建一个新行。

块级元素始终在新行上开始并占用全宽可用（向左和向右延伸直至它能）。

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

此布局可能更适合您。 https://jsfiddle.net/jzcxhp2L/7/

<div style="display: flex; height: 300px; width: 95vw; margin:0 auto;">
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
  </div>
  <div style="border: 1px solid black; height: 300px; flex:1;">
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    <p>asdlfadsf</p>
    </div>
</div>

Answer 4

<p>有自己的保证金

尝试将margin-top和/或bottom设置为0px

p {
    margin-top: 0px ;
    margin-bottom: 0px ; 
}

或尝试为您的<p>代码指定一个包含display = inline

的类

.class-inline {
    display: inline ; 
}

或使用内联样式：

<p style="display: inline">

为什么p标签按下父div？

4 个答案: