HTML/CSS佈局浮動？

Question

我想佈局的東西，最初需要的樣子：

然後，我需要通過jQuery加2個的div，使它看起來像：

我正在嘗試將所有內容放入一個div容器中，然後再創建其他div：

• 主要方塊，
• 底部的矩形，
• 然後當需要包含2個其他div（2個方塊）的div時。

當2個方塊不存在時，主方形和底部方形必須佔據容器的整個寬度。

我試過漂浮在左邊div包含2個方塊和一些其他的東西，但我失敗了。

HTML樣子：

<div id="container"> 
    <div id="videos"> 
     <video autoplay muted id="localVideo"></video> 
     <br> 
     <video autoplay id="remoteVideo"></video> 
    </div> 
    <div id="chatMessagesWindow"></div> 
    <input autofocus="autofocus" placeholder="Enter a message" id="chatInput"> 
</div> 

CSS樣子：

#container { 
    width: 850px; 
    border: 1px solid black; 
    height: 580px; 
} 

#chatMessagesWindow { 
    width: 70%; 
    height: 100%; 
    border: 9px solid gray; 
    margin-bottom: 7px; 
    overflow: auto; 
    float: right; 
} 

#chatInput { 
    width: 100%; 
    height: 35px; 
    border: 1px solid gray; 
    float: right; 
} 


#videos { 
    display: none; 
    width: 30%; 
    float: left; 
} 

#videos video { 
    border: 1px solid black; 
} 

在JavaScript中我展示.show()的#videos元素。

小提琴：http://jsfiddle.net/67WLG/1/

Answer 1

也許這會幫助你！

HTML：

<div class="page-wrap"> 
    <div class="existed-content"> 
     <div class="main-content">this is a big div</div> 
     <div class="main-footer">this is your footer content</div> 
    </div> 
</div> 

CSS：

.page-wrap { 
    clear: both; 
} 
.existed-content { 
} 
.js-added-content { 
    float: left; 
    width: 130px; //this can be defined by yourself! 
} 

JS（使用jQuery）：

$(function() { 
    var STR = "<div class='js-added-content'><div>this is left top box!</div><div>this is left bottom box!</div></div>"; 
    var $pageW = $('.page-wrap'); 
    $pageW.prepend(STR); 
}); 

Answer 2

這聽起來像一個工作，CSS-Tables：所有的便利佈局功能沒有任何內容污染的HTML表格！或者至少是最小的內容污染。我需要添加一個div來作爲你的聊天消息的容器和聊天輸入元素：

<div id="container"> 
    <div id="videos"> 
     <video autoplay muted id="localVideo"></video> 
     <br> 
     <video autoplay id="remoteVideo"></video> 
    </div> 
    <div id="chatContainer"> 
     <div id="chatMessagesWindow"></div> 
     <input autofocus="autofocus" placeholder="Enter a message" id="chatInput"> 
    </div> 
</div> 

更改你的CSS基本上包括增加新chatContainer ID，擺脫任何花車，並在加一些display:行。開頭的box-sizing行確保在確定元素的寬度和高度時考慮任何邊界。出於某種原因，默認情況下僅忽略元素內部的邊框和基本尺寸。如果你最終沒有使用任何邊框，你可以擺脫這些線條。

div { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

#container { 
    width: 850px; 
    border: 1px solid black; 
    height: 580px; 
    display: table; 
} 

#chatContainer { 
    border: 1px solid red; 
    display: table-cell; 
} 

#chatMessagesWindow { 
    width: 100%; 
    height: 530px; 
    border: 9px solid gray; 
    margin-bottom: 7px; 
    overflow: auto; 
} 
#chatInput { 
    width: 100%; 
    height: 35px; 
    border: 1px solid gray; 
} 
#videos { 
    border: 2px solid green; 
    display: none; 
} 

#videos video { 
    border: 1px solid black; 
} 

的視頻格可以隱藏在JavaScript中使用此語法：<object>.style.display="none"與<object>.style.display="table-cell"，其中當然是視頻DIV所示。

視頻元素本身可能仍然需要一些定位工作，而其他一些元素也可能需要調整大小。

Answer 3

我曾在的jsfiddle

此例嘗試這個link

JS：

$('#container').on('click', function() { 
    $('#videos').show(); 
}); 

CSS：

#right_blk { width:auto;display:table; } 
#container { 
    width: 850px; 
    border: 1px solid black; 
    height: 580px; 
} 

#chatMessagesWindow { 
    width: 98%; 
    height: 562px; 
    border: 9px solid gray; 
    margin-bottom: 7px; 
    overflow: auto; 
    float: left; 
    display:table; 
} 

#chatInput { 
    width: 100%; 
    height: 35px; 
    border: 1px solid gray; 
    float: right; 
} 


#videos { 
    display: none; 
    width: 30%; 
    float: left; 
} 

#videos video { width:99.1%; 
    border: 1px solid black; 
} 

HTML：

<div id="container"> 
    <div id="videos"> 
     <video autoplay muted id="localVideo"></video> 
     <br> 
     <video autoplay id="remoteVideo"></video> 
    </div> 

    <div id="right_blk"> 
    <div id="chatMessagesWindow"> 
    asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd asadad asdasdasd asds dsadasds asdasd 
     </div> 
     <input autofocus="autofocus" placeholder="Enter a message" id="chatInput"> 
    </div> 
</div> 

Answer 4

在我自己的情況下，首先，我想創建一個global-wrapper將採取850px width。

它將包含#videos（默認情況下 - display:none;）和聊天#container，它會左移並繼承寬度global-wrapper。

在#container的click()：

1. 設置#videos的寬度1 /第三（例如）和float: left。
2. 將#container的寬度設置爲剩餘2/3和float it left。
3. 調用show()方法上#videos

而不是使用jQuery的css()方法，使用預定義的CSS類和動態添加他們。