水平对齐两个 div [重复]答案

【问题标题】：Align two divs horizontally [duplicate]水平对齐两个 div [重复]
【发布时间】：2016-07-27 08:06:47
【问题描述】：

我在尝试对齐 wordpress 页面中的两个 div 时遇到问题。这是我的代码：

    div.container {
    width: 100%;
    }

    div.left {
    float: left; 
    }

    div.right {
    float: right; 
    }

    <div class="container">

    <div class="left">
    <p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    <div class="right">
    <p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    
    </div>

但它不能正常工作

【问题讨论】：

您确定您的 CSS 加载正确吗？我已经测试了您的 HTML 和 CSS，它运行良好。见这里：jsfiddle.net/salih0vicX/y98bff9e
width: 100% 表示它们跨越整行。使其 50% 没有利润或考虑到利润

标签： html css wordpress

【解决方案1】：

只需在两个 div 上使用 float: left 和 width 1/2

div.container {
    width: 100%;
    }

    .div {
    float: left; 
      width: 50%;
    }

<div class="container">

    <div class="div">
    <p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    <div class="div">
    <p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    
    </div>

【讨论】：

【解决方案2】：

块引用

给予 **display:inline-block; 对于两个 div 元素

【讨论】：

【解决方案3】：

试试这个，您需要将width 分配给您的.left 和.right，甚至分配给这些div 中的iframes。

body{
  margin:0;
}
.container {
width: 100%;
}

.container > .left {
float: left; 
width:49%;
height:auto;
}

.container > .right {
float:right; 
width:49%;
height:auto;
margin-left:1%;
}

<div class="container">

<div class="left">
<p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
<div class="right">
<p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
<iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="100%" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div>

【讨论】：

如果上述代码有效，@Antonio102 接受答案。

【解决方案4】：

最好的方法是使用flex-box

flex-box 还可以帮助您实现响应能力。我添加了一行的 media-query 以使其在移动屏幕上响应。在移动屏幕上它会像一个在另一个屏幕上，而在桌面上它会并排出现（如果你不想要，你可以删除媒体查询）。

div.container {
  display: flex;
}
.container div{
  margin: 1em;
}

@media screen and (max-width: 480px){
  div.container{
	  flex-direction: column;
  }
}

<div class="container">

    <div class="left">
    <p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    <div class="right">
    <p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    
</div>

这是更新后的Demo

【讨论】：

【解决方案5】：

试试这个

    div.container {
        width: 100%;
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        }
    div.right {
      margin-left:10px;
    }

<div class="container">

    <div class="left">
    <p id="cagliari" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12364.675124477504!2d9.1242403!3d39.2163323!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xad759bffc1fbf334!2sItalSecurity+Agency+%7C+Agenzia+Investigativa!5e0!3m2!1sit!2sit!4v1469542451708" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

    <div class="right">
    <p id="oristano" class="rtejustify" style="text-align: left;">Text Text Text</p>
    <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3060.6645205664345!2d8.584972315150939!3d39.90414279457802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12dd9be3f40242ad%3A0x11a591da0ed6a074!2sItal%40Security+Agency!5e0!3m2!1sit!2sit!4v1469543170307" width="400" height="300" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
    
    </div>

【讨论】：