Question

我无法在wordpress页面中对齐两个div。这是我的代码：

＆＃13;

    div.container {
    width: 100%;
    }

    div.left {
    float: left; 
    }

    div.right {
    float: right; 
    }

＆＃13;

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

＆＃13;

但它没有正常运作

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

块引用

<强>提供 **显示：内联块; 两个div元素

Answer 3

试试这个，您需要将1) Element that contains only Attributes; 2) Element that contains only Nodes; 3) Element that contains Nodes and Attributes; 4) Element that contains Nodes, Attributes and finnaly Grouped Nodes, that will warp into another DataGrid;分配给width和.left，甚至.right分配给那些div。

＆＃13;

iframes

＆＃13;

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%;
}

＆＃13;

Answer 4

试试这个

    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>

Answer 5

实现此目标的最佳方法是使用flex-box

flex-box也可以帮助您实现响应能力。我已添加{{1>} 仅一行，以便在移动设备屏幕上进行响应。在移动屏幕中，它将像一个在另一个之下，在桌面中它将并排（如果你不想，可以删除媒体查询）。

media-query

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

以下是更新的 Demo

水平对齐两个div

5 个答案: