Question

我在排队两个div时遇到了很多麻烦。一个是推特时间线框，另一个是联系人输入框。现在它看起来像这样：Not lining up divs page

正文设置为1020px，HTML中的页面如下：

<div class="half" id="contact-info">
<h3>Contact Us</h3>
<p>Feel free to ask us any questions, send us any opportunities or pitch us your winning idea. There are infinite ways to play!</p>

<a class="twitter-timeline" href="https://twitter.com/8PlayerPictures" data-widget-id="450740338580140032">Tweets by @8PlayerPictures</a>
<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>

<div class="half">
[contact-form-7 id="121" title="Contact form 1"]
</div>

半div的代码在这里：

.half  { width: 50%; margin: 0; display:inline-block; }

这是CSS。我尝试使用浮点数，内联块，边距...几乎所有我都可以理解。我现在还很新，可以使用一些指针。

#contact-info {
color: #444;
line-height: 28px;
font-weight: 200;}

.twitter-timeline {
margin-top: 15px;
float: left;
clear:both;
width: 100%;

}


#wpcf7-f22-p5-o1 {
width: 100%;
display: inline-block;
text-align: center;
height: 500px;
border: 2px solid rgb(42,199,239);
/*background-color: rgba(42, 199, 239, .8);*/
/*background-color: rgba(128, 199, 242, 1);*/
background-image: url(http://i.imgur.com/QIXENNf.png);
border-radius: 3px;
}

如何让这两个div排成一行？我在这里做错了什么？

Answer 1

我想说的第一件事是：

原因：内联块元素之间的空格

两个.half元素的宽度均为50％，它们之间的间距也较小。因此总宽度将大于100％。这就是为什么这两个元素没有对齐的原因。

如果您坚持使用inline-block，则需要额外的工作来删除内联块元素之间的空格。在这里您可以获得更多信息 - ＆gt; How to remove the space between inline-block elements?

解决方案

选择解决此问题的方法，建议使用第一种方法。

浮

将float: left;添加到.half课程会让事情变得非常简单。
内联块

首先，如上所述删除内联块元素之间的空格。

如果需要，请确保两个元素顶部对齐。将vertical-align: top;添加到.half课程会有所帮助。

最后，不推荐这种方式。我只想提出一种可以解决问题的方法。

Answer 2

在.half课程中，添加float: left;。

没有排列宽度的Div：CSS中的50％

2 个答案:

原因：内联块元素之间的空格

解决方案