1. 首頁
  2. 問答
  3. 水平對齊兩個div

水平對齊兩個div

2016-07-27 211 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

相關問題

 相關問題