1. 首页
  2. 问答
  3. 水平对齐两个div

水平对齐两个div

2016-07-27 214 views
1

我在尝试对齐两个div在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>

不过，这并不正常工作

来源

2016-07-27 Antonio102

+0

你确定你的CSS是否正确装入？我测试过你的HTML＆CSS，它运行良好。看到这里：https：//jsfiddle.net/salih0vicX/y98bff9e/ – salih0vicX

+0

'宽度：100％'意味着他们跨越整个行。使它无边际50％或如果他们把他们账户 – eltonkamami

+0

调整他们如何？ –

回答

1

块引用

给 **显示：inline-block的; 两个div元素

来源

2016-07-27 08:11:02

2

只需使用float: left和width 1/2两个DIV

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>

来源

2016-07-27 08:11:12

0

试试这个，你需要分配width您.left和.right甚至iframes目前既在那些div里面。

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>

来源

2016-07-27 08:19:34 frnt

+0

@ Antonio102接受上述代码工作的答案。 – frnt

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>

来源

2016-07-27 10:36:59 Friend

0

实现这一目标的最佳途径是使用flex-box

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

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

 
@media screen and (max-width: 480px){ 
 
    div.container{ 
 
\t 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

来源

2016-08-09 10:45:23

相关问题

 相关问题