我有兩個元素(地圖+描述框內)。當在大屏幕上時,兩個元素都出現在同一行上,這很好。但是,他們留在頁面的左側,我希望他們坐在中間。居中在CSS/HTML中彼此相鄰的2個元素
的下方Here is a fiddle:
.map {
float: left padding: 10px;
width: 410px;
border: 1px solid black;
display: inline-block;
}
.map1 {
float: right padding: 10px;
width: 410px;
border: 1px solid black;
display: inline-block;
}
p {
float: left;
width: 100%;
}
<div class="map">
<iframe src="https://ctrc00.carto.com/builder/e2f49f3c-b793-11e6-9ceb-0ef24382571b/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p><i>
<u>Map 1: <strong>12,083 listings</strong> (Sept.2016)</i>
</u>
<h4><span style="color: #FFA500;"><strong>Activity:</strong></span></h4>
<br>
<strong>183</strong> estimated nights/year
<br>
<strong>$127</strong> price/night
<br>
<strong>50.2%</strong> estimated occupancy
<br>
<strong>$1920</strong> estimated income/month
<br>
<h4><span style="color: #FFA500;"><strong>Listing per Host:</strong></span></h4>
<br>
<strong>38.2%</strong> multi-listings
<br>
<strong>62.0%</strong> single listings
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Room Type:</strong></span></h4>
<br>
<strong>55.3%</strong> entire homes/apartment
<br>
<strong>42.6%</strong> private rooms
<br>
<strong>2.1%</strong> shared rooms
<br>
</p>
</div>
<p>
<div class="map1">
<iframe src="https://ctrc00.carto.com/builder/221c9570-b794-11e6-ad89-0e8c56e2ffdb/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<p><i><u>Map 2: <strong>15,640 listings</strong> (Sept.2016)</p></i>
</u>
<h4><span style="color: #FFA500;"><span style="color: #FFA500;"><strong>Activity:</strong></span></h4>
<br>
<strong>60</strong> estimated nights/year
<br>
<strong>$196</strong> price/night
<br>
<strong>16.3%</strong> estimated occupancy
<br>
<strong>$759</strong> estimated income/month
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Listing per Host:</strong></span></h4>
<br>
<strong>28.5%</strong> multi-listings
<br>
<strong>71.5%</strong> single listings
<br>
<br>
<h4><span style="color: #FFA500;"><strong>Room Type:</strong></span></h4>
<br>
<strong>60.3%</strong> entire homes/apartment
<br>
<strong>37.9%</strong> private rooms
<br>
<strong>1.8%</strong> shared rooms
<br>
</p>
</div>
上面和下面,我有一些簡單的文本/段落是在中間。
我花了一些時間來找出如何使這兩個地圖彼此相鄰^^ –
將這兩個塊包裝在'div'中並使用css3 flexbox。 [**小提琴**](https://jsfiddle.net/jbf0dcat/2/)。 –
omg。是這麼簡單!非常感謝你 –