浮子：在右側

段落/文本左格這是我JS提琴：浮子：在右側

這裏是CSS代碼：

.viddiv{ 
    float:left; width:50%; 
} 

.vidholder{ 
    position:relative;height:0;padding-bottom:50%; 
    width:50%; 
    float:left; 
} 

iframe{ 
    position:absolute; height:100%; width:100%;top:0;left:0; 

}

我想把段落旁在右邊的視頻，我已經嘗試將其設置爲float:left，但它仍然無法正常工作。我該怎麼辦？

來源

2015-10-20 Carlos Miguel Colanta

Codepenhttp://codepen.io/noobskie/pen/gaorXm?editors=110

林不知道哪裏該代碼的下方適用於本

.viddiv{ 
    float:left; width:50%; 
}

片段

.vidholder { 
 
    position: relative; 
 
    height: 0; 
 
    padding-bottom: 50%; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
iframe { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.textContainer { 
 
    width: 50%; 
 
    float: right; 
 
}

<div style="width:100%"> 
 

 
    <div class="vidholder"> 
 
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
    <div class="textContainer"> 
 
    <p style=" word-wrap: break-word;">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p> 
 
    </div> 
 
</div>

編輯之所以float:left不會工作，是因爲你的使用absolute的位置，使iframe響應，但是與absolute位置股利崩潰導致文本隱藏iframe下方。

來源

2015-10-20 03:24:41 NooBskie

唉唉我明白了，還等什麼我的代碼錯了嗎？以及它怎麼會不工作w /浮動離開？ –

@CarlosMiguelColanta添加了原因 – NooBskie

oooo我看到了，非常感謝你 –

在您的html代碼中，您將視頻以100％寬度包含在div中。該段是否應該包含在該格中？

<div style="width:100%"> 

    <div class="vidholder"> 
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe> 
    </div> 

    <p style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p> 

</div>

來源

2015-10-20 03:27:33

我希望把視頻旁邊的段落右側

這裏是一個非常簡單的方法來做到這一點：

CSS

#container { display: flex; }

DEMO：https://jsfiddle.net/9yj63s3f/1/

瞭解更多關於CSS Flexbox。

來源

2015-10-20 03:33:54

問題是，現在的段落溢出。 –

... [現在它不]（https://jsfiddle.net/9yj63s3f/2/）;-) –

簡單的解決方案是將p標記改爲pre這將填充視頻div右側的文本。

<pre style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</pre>

來源

2015-10-20 04:56:45

我已經tweeked你的小提琴一點，這是生成的代碼：（如果你沒有獲得小提琴）

<style> 

.viddiv{ 
    float:left; width:50%; 
} 

.vidholder{ 
    position:relative;height:0;padding-bottom:50%; 
    width:50%; 
    float:left; 
} 
figure { 
    width:100%; 
} 
figure iframe{ 
    height:100%; width:50%;float:left; 

} 

figure figcaption { 
    width:50%; 
    float:right; 
} 
</style> 

<div style="width:100%"> 

<div class="vidholder"> 
<figure> 
    <iframe width="480" height="390" src="https://www.youtube.com/embed/hqiNL4Hn04A" frameborder="0" allowfullscreen></iframe> 
    <figcaption> 
     <p style=" word-wrap: break-word;"> @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</p> 
    </figcaption> 
</figure> 
</div> 

</div>

jsfiddle

來源

2015-10-20 06:08:38 Lahori

浮子：在右側

回答

相關問題