Question

当使用两个div元素和内联块时，两个div不会彼此相邻。

这是代码。（我将一些段落和图像配置得更好。虽然我确保结果是相同的。）

<head>
    <style>
    #line {
        display:inline-block;
        margin-left:5%;
        margin-right:75%;
        border: 5px solid orange;
    }
    #TEST {
        width:100%;
    }
    #pTxt {
        text-align:center;
    }
    #heading {
        color: red;
    }
    </style>
</head>
<body>
    <div id="line">
            <div>
                <img id="TEST" alt="PICTURE" src="test.png" />
                <div id="pTxt">
                     <h3 id="heading">
                                HEADING
                            </h3>

                    <p>TEST</p>
                    <br/>
                    <p>TEST</p>
                </div>
            </div>
        </div>
        <div id="line">
            <img alt="PICTURE" id="TEST" src="test.png" />
            <div id="pTxt">
                 <h3 id="heading">
                                HEADING
                            </h3>

                <p>TEST</p>
                <br/>
                <p>TEST</p>
            </div>
        </div>
</body>

http://jsfiddle.net/gqfmmdy9/1/

提前致谢。

Answer 1

您正在设置margin-right: 75%，这会将下一个元素推到底部。您必须将其删除。

Fiddle

#line {
    display:inline-block;
    margin-left:5%;
    border: 5px solid orange;
}

＆＃13;

#line {
  display: inline-block;
  margin-left: 5%;
  border: 5px solid orange;
}
#TEST {
  width: 100%;
}
#pTxt {
  text-align: center;
}
#heading {
  color: red;
}

＆＃13;

<div id="line">
  <div>
    <img id="TEST" alt="PICTURE" src="test.png" />
    <div id="pTxt">
      <h3 id="heading">
                        HEADING
                    </h3>
      <p>
        TEST
      </p>
      <br/>
      <p>
        TEST
      </p>
    </div>
  </div>
</div>
<div id="line">
  <img alt="PICTURE" id="TEST" src="test.png" />
  <div id="pTxt">
    <h3 id="heading">
                        HEADING
                    </h3>
    <p>
      TEST
    </p>
    <br/>
    <p>
      TEST
    </p>
  </div>
</div>

＆＃13;

Answer 2

#line {
        display:inline-block;
        margin-left:5%;

        margin-right:75%;

        border: 5px solid orange;
}

你的风格正在工作。

尝试将margin-right:75%;换成margin-right:2%;。

编辑：另外，我怀疑你需要给#line一个明确的宽度声明。类似于width:12%;。

Answer 3

如果您想并排div，则可以使用<table>标记。看看这是否适合你。

<table>
    <tr><td><div class="line">
            <div>
                <img class="TEST" alt="PICTURE" src="test.png"/>
                <div class="pTxt">
                    <h3 class="heading">
                        HEADING
                    </h3>
                    <p>
                        TEST
                    </p>
                    <br/>
                    <p>
                        TEST
                    </p>
                </div>
           </div>
    </div></td>
<td><div class="line">
        <img alt="PICTURE" class="TEST" src="test.png"/>
                <div class="pTxt">
                    <h3 class="heading">
                        HEADING
                    </h3>
                    <p>
                        TEST
                    </p>
                    <br/>
                    <p>
                        TEST
                    </p>
                </div>
    </div></td></tr>
</table>

和CSS

.line {
        display:inline-block;
        margin-left:5%;
        margin-right:75%;
        border: 5px solid orange;
}
.TEST {
    width:100%;
}
.pTxt {
    text-align:center;
}
.heading {
    color: red;
}

带有内联块的CSS Div元素不起作用

3 个答案:

Fiddle