CSS - Сделайте два <section> теги бок о бок

Мой текущий код заключается в следующем:CSS - Сделайте два <section> теги бок о бок

<section><iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section> 
<section><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

Моя задача требует от меня, чтобы использовать раздел метки на обоих фрейма и текстовое поле, но мне нужно, чтобы они выстраиваются в сторону . Когда я беру теги разделов, они выстраиваются идеально, но мне нужно сохранить теги раздела. Как мне получить это, чтобы выстроить линию, как 2 столбца, но все еще держать теги?

источник

2013-05-03 user2345635

не хватает информации. Является ли это единственным содержимым вашей страницы (иначе это ваша структура 'body> section + section')? – Zeta

Вам нужен CSS, чтобы выровнять их. HTML сам по себе не будет делать это с кодом, который вы отправили. –

Мой код слишком длинный, чтобы опубликовать ... но позвольте мне разместить немного больше – user2345635

Используйте CSS styles с css selectors и посмотрите на float.

Быстрый и грязный исправить:

<section style="float:left; width:675px;"><iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section> 
<section style="float:left; width:200px;"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

источник

2013-05-03 05:13:40

+1, Быстро и грязно. :) Пожалуйста, не используйте встроенный CSS, когда это возможно, тем более, что вы просто учитесь - это слишком просто для создания вредных привычек во имя «заставить его работать» –

Я поместил ширину в теги раздела, но я переместил стиль до моего раздела css, и мы будем рады. Спасибо! – user2345635

Настоящий .. но из текущей версии вопроса * невозможно * дать точный ответ лучшей практики. Будет обновлен, чтобы указать в правильном направлении. –

<section style="display:block;float:left; width:675px;"> 
    <iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe> 
</section> 
<section style="display:block;float:left; width:200px;"> 
    <textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea> 
</section>

источник

2013-05-03 05:22:51

Я начинаю склоняться от поплавков и к инлайн-блок

HTML

<section class="left"> 
    <iframe id="frame1" width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe>  
</section> 
<section class="right"> 
    <textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea>  
</section>

CSS

.left 
{ 
    display:inline-block; 
    width:675px; 
} 


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

Пример: http://jsfiddle.net/nV8ag/

Инлайн-блок действительно есть несколько предостережений, хотя: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

источник

2013-05-03 05:27:14

Вы должны всегда ставить стили во внешней таблице стилей.

Тогда вы могли бы поместить этот код в HTML:

<section id="section-1"><iframe width="675" height="380" src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section> 
<section id="section-2"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

И есть что-то вроде этого в файле CSS:

section {display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;*display:inline;} 
#section-1 {width:680px; height:400px;} These are the ID's of your sections 
#section-2 {width:200px; height:480px;}

Кроме того, если вы учитесь использовать элементы HTML5, вы должны сделать убедитесь, что вы включили поддержку HTML5 для старых браузеров.

Просто введите это в заголовки HTML-документа.

<!--[if IE]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

источник

2013-05-03 05:36:48

Просто установите ширину обеих секций и установить поплавок влево для обоих, как:

<section style="float:left; width:675px;"><iframe id="frame1" width="675" height="380"   src="http://www.youtube.com/embed/hmAFhsxWhdY" frameborder="0" allowfullscreen></iframe></section> 
<section style="float:left; width:200px;"><textarea rows="24" cols="25" id="desc" width="200" height="478">Text here</textarea></section>

источник

2013-05-03 06:23:47

CSS - Сделайте два <section> теги бок о бок

ответ

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