我无法在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>
&#13;
但它没有正常运作
答案 0 :(得分:2)
只需在两个div上使用float: left
和width 1/2
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;
答案 1 :(得分:1)
块引用
<强>提供 **显示:内联块; 强> 两个div元素
答案 2 :(得分:0)
试试这个,您需要将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。
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;
答案 3 :(得分:0)
试试这个
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>
答案 4 :(得分:0)
实现此目标的最佳方法是使用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