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

当使用两个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/

提前致谢。

最佳答案

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

Fiddle

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

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

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

关于html - 带有内联块的CSS Div元素不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27214665/