Как разместить два Iframes тот же ряд

У меня есть этот код:Как разместить два Iframes тот же ряд

<div align="center"> 
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe> 
</div> 
<div style="text-align:center;"> 
<a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a> 
</div> 
<div align="center"> 
<iframe scrolling="no" src="//blockadz.com/ads/show/show.php? a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;" frameborder="0"; padding- bottom: 20px; display:inline-block;></iframe> 
</div> 
<div style="text-align:center;"> 
<a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a> 
</div>

Я хочу показать в той же строке, но не знаете как? Я пробовал добавить: display:inline-block; и white-space: nowrap;, но ничего не изменилось.

Любая помощь?

источник

2016-11-30 Dr.MTR

Большая часть вашего CSS, включая 'дисплей: инлайн-block' находится вне атрибута "стиль" .... –

Попробуйте добавить CSS поплавок главной дивы

<div style="float:left;"> 
    <div align="center"> 
     <iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe> 
    </div> 
    <div style="text-align:center;"> 
     <a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a> 
    </div> 
</div> 
<div style="float:right;"> 
    <div align="center"> 
     <iframe bottom:="" frameborder="0" padding-="" scrolling="no" src="//blockadz.com/ads/show/show.php?%20a=6NJWBKLSGP8CY&b=OYEPEGYYZ996L" style="overflow:hidden;width:468px;height:60px;"></iframe> 
    </div> 
    <div style="text-align:center;"> 
     <a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a> 
    </div> 
</div>

See in jsfiddle

источник

2016-11-30 16:54:37

поплавок действительно лучше зарезервированное для вещи, которые должны быть, хорошо, плавают; дисплей: встроенный блок действительно более уместен. (В основном вы получаете встроенный блок как побочный эффект поплавка.) –

У вас есть несколько различных вопросов здесь происходит:

Вы недопустимую разметку на фреймов (некоторые из ваших CSS вне атрибута «style», поэтому не будут иметь никакого эффекта.)
Ваши «объявления в этом месте» - это полная ширина страницы, которая будет мешать бок-о-бок-макет, который вы пытаетесь применить к iframes.

Простейшим решением является добавление родительских контейнеров в каждый набор iframe-plus-link и применение макета к этим контейнерам. Для ясности здесь я вытащил свой встроенный CSS вне в объявлении класса, и изменять размеры, чтобы соответствовать в макете SO, но вы можете изменить это любых размеров и стилей, которые вам нравятся:

.container { 
 
    width: 200px; 
 
    display:inline-block; 
 
} 
 

 
iframe { 
 
    height: 100px; 
 
    width: 200px; 
 
} 
 

 
.ad { 
 
    text-align:center 
 
}

<div class="container"> 
 
    <iframe src="//example.com"></iframe> 
 
    <div class="ad">Advertise in this spot</div> 
 
</div> 
 

 
<div class="container"> 
 
    <iframe src="//example.com"></iframe> 
 
    <div class="ad">Advertise in this spot</div> 
 
</div>

источник

2016-11-30 17:03:39

Спасибо за ваш ответ, но первым ответом было то, что мне нужно.:) –

Будьте осторожны с использованием 'float' willy-nilly; это может вызвать другие проблемы с компоновкой. (За исключением неправильного использования 'float', два ответа по существу одинаковы.) –

ОК уверен, имейте в виду это. –

Просто добавьте CSS к элементам братьев и сестер (в этом случае родитель <div> элемент), чтобы сделать их показать в одной и той же линии, как

div[align] { display: inline-block; }

или

div[align] { float: left; }

и определить ширину для них (если они адаптируются к ширине содержимого они могут получить на новой линии, если слишком большой)

div[align] { width: 50%; } 
iframe { width: 100%; } /* or max-width */

источник

2016-11-30 17:05:55 Giovazz89

Две дивы с шириной 50%:

HTML

<div id="first_column"> 
<div align="center"> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe> 
</div> 
<div style="text-align:center;"> 
<a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a> 
</div> 
</div> 

<div id="second_column"> 
<div align="center"> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/CevxZvSJLk8" frameborder="0" allowfullscreen></iframe> 
</div> 
<div style="text-align:center;"> 
<a href="https://blockadz.com/?a=BuyAds&id=6NJWBKLSGP8CY" target="_blank">Advertise in this spot</a> 
</div> 
</div>

CSS

#first_column, 
#second_column { 
    width: 50%; 
} 

#first_column { 
    float:left; 
} 

#first_column { 
    float:right; 
}

Пример: http://codepen.io/anon/pen/vyWrbX

источник

2016-11-30 17:06:21

Как разместить два Iframes тот же ряд

ответ

Смежные вопросы