Question

在我的一个页面上，我有两个元素（让我们将它们命名为X和Z）用inline-block设置样式，因此它们位于另一个旁边。

在他们正下方我想放置三个元素（让我们将它们命名为A，B，C），一个又一个旁边。

当我用inline-block插入元素A时，它会在Z旁边。

如果我将clear:both应用于A，那么它会进入（这样很好），但如果我也将inline-block应用于A，那么A，B和C就在X和Z旁边！我怎样才能覆盖这个？

.header h1 {
	text-align: center; 
}

.map img{
	width: 100%; 
	height: 100%; 
}

.logo {
  display: inline-block;
  float: left;
}

.logo img {
	display: block;
  margin: auto;
}

.info {
	padding: 5px ;
  display: inline-block;
  float: left;
  background-color: #c0dfd9
}

.column1 {
	width: 45%;
}

    <div class="container" id="contact"> <!-- /CONTACT -->
      <div class="map">
        <img src="img/map.jpg" alt="map">
      </div>
      <div class="header">
        <h1 id="contactheader">Contact me</h1>
        <div>  
          <div class="logo column1">
            <img src="img/logo.png" alt="logo">
          </div>
          <div class="info column1">  
            <p><span class="glyphicon glyphicon-user"></span><strong>Email:</strong>John@john.com</p>
            <p><span class="glyphicon glyphicon-home"></span><strong>Address:</strong>Plateia Karitsi 25</p>
            <p><span class="glyphicon glyphicon-asterisk"></span><strong>Telephone:</strong>+30 1654984</p>
          </div>  

        </div>  <!-- /END CONTACT -->

        <br>

        <footer>

        <div id="copyright">&copy;John 2016</div>

        <div id="twitterbutton"><a href="https://twitter.com/aptbs" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @aptbs</a></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

        <div class="fb-like" data-href="https://www.facebook.com/QOTSA/?fref=ts" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>

        </footer>

Answer 1

换行符：https://developer.mozilla.org/en/docs/Web/HTML/Element/br

div {display: inline-block; padding: 8px 12px; background: #ccc; margin: 4px}

<div>x</div>
<div>z</div>
<br>
<div>a</div>
<div>b</div>
<div>c</div>

无需使简单的事情复杂化。

以下是我在评论中写的代码修改的代码：

您需要从X和Z中删除浮动规则。然后您甚至不需要<br>，因为它们位于不同的块中。另外，确保A，B和C也是内联块（现在它们是块）。

.header h1 {text-align: center;}

.map img{width: 100%; height: 100%;}

.logo, #twitterbutton, #copyright, .fb-like {display: inline-block;}

.logo img {display: block; margin: auto;}

.info {padding: 5px; display: inline-block; background-color: #c0dfd9}

.column1 {width: 45%;}

<div class="container" id="contact"> <!-- /CONTACT -->
      <div class="map">
        <img src="img/map.jpg" alt="map">
      </div>
      <div class="header">
        <h1 id="contactheader">Contact me</h1>
        <div>  
          <div class="logo column1">
            <img src="img/logo.png" alt="logo">
          </div>
          <div class="info column1">  
            <p><span class="glyphicon glyphicon-user"></span><strong>Email:</strong>John@john.com</p>
            <p><span class="glyphicon glyphicon-home"></span><strong>Address:</strong>Plateia Karitsi 25</p>
            <p><span class="glyphicon glyphicon-asterisk"></span><strong>Telephone:</strong>+30 1654984</p>
          </div>  

        </div>  <!-- /END CONTACT -->

        <footer>

        <div id="copyright">&copy;John 2016</div>

        <div id="twitterbutton"><a href="https://twitter.com/aptbs" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @aptbs</a></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

        <div class="fb-like" data-href="https://www.facebook.com/QOTSA/?fref=ts" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>

        </footer>

停止`inline-block`然后重新开始

1 个答案: