在CSS中定位DIV的問題

Question

我正在嘗試將textarea右側的「可用房間對話框」div移動到「textarea」的右側，並將「可用房間」還是不會的地方，我希望這是我的代碼：

CSHTML：

<h2>General Chat</h2> 

<div id="wrapper"> 

    <div id="upper-wrapper"> 
     <div id="discussion-dialog"> 
      <textarea rows="30" cols="50" id="discussion"></textarea> 
     </div> 
     <div id="available-rooms-dialog"> 
      <h4>Available Rooms</h4> 
      <button type="button" id="createroom" value="Create Room"></button> 
     </div> 
    </div> 
    <div id="message-dialog"> 
     <textarea rows="3" id="message">Type your message</textarea> 
     <br/> 
     <input type="button" id="sendmessage" value="Post" /> 
     <input type="hidden" id="displayname" /> 
     <input type="checkbox" id="enter-sends-message"/> 
     Enter sends message 
    </div> 
</div> 

這裏是我的CSS：

div.container { 
    position: relative; 
} 
body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
} 
#wrapper 
{ 
    position: relative; 
} 

#discussion 
{ 
    width: 75%; 
    overflow-y: scroll; 
} 

#message 
{ 
    border: 3px solid #cccccc; 
    width: 75%; 
} 


/* Set padding to keep content from hitting the edges */ 
.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

/* Set width on the form input elements since they're 100% wide by default */ 
input, 
select, 



/* styles for validation helpers */ 
.field-validation-error { 
    color: #b94a48; 
} 

.field-validation-valid { 
    display: none; 
} 

input.input-validation-error { 
    border: 1px solid #b94a48; 
} 

input[type="checkbox"].input-validation-error { 
    border: 0 none; 
} 

.validation-summary-errors { 
    color: #b94a48; 
} 

.validation-summary-valid { 
    display: none; 
} 

#upper-wrapper { 
    position: relative; 
    width: 100%; 
} 

#discussion-dialog 
{ 
    /*border: 3px solid #cccccc;*/ 
    font-family: Tahoma, sans-serif; 
    position: relative; 
    top: 5px; 
} 
#available-rooms-dialog 
{ 
    position: relative; 
    right: 0px; 
    top: 0px; 
} 

#message-line { 
    position: relative; 
} 

#message-dialog 
{ 
    position: relative; 
    top: 10px; 
    font-family: Tahoma, sans-serif; 
} 

下面是它目前的樣子：

Answer 1

一種選擇是移動在你的HTML的discussion-dialog以上available-rooms-dialog，而且浮動的權利。即：

<div id="upper-wrapper"> 
    <div id="available-rooms-dialog"> 
     <h4>Available Rooms</h4> 
     <button type="button" id="createroom" value="Create Room"></button> 
    </div> 
    <div id="discussion-dialog"> 
     <textarea rows="30" cols="50" id="discussion"></textarea> 
    </div> 
</div> 

#available-rooms-dialog 
{ 
    float: right; 
} 

例子：http://jsfiddle.net/VxU5Y/

Answer 2

#message-dialog { 
float: left; 
} 

#upper-wrapper { 
    float: left; 
} 

Answer 3

你可以設置你的HTML和CSS下面給出的規定安排您的DIV ....

HTML -

<h2>General Chat</h2> 

<div id="wrapper"> 
    <div id="upper-wrapper"> 
     <div id="discussion-dialog"> 
      <textarea rows="10" cols="50" id="discussion"></textarea> 
     </div> 
     <div id="available-rooms-dialog"> 
      <h4>Available Rooms</h4> 
      <button type="button" id="createroom" value="Create Room"></button> 
     </div> 
     <div class="clear"></div> 
    </div> 
    <div id="message-dialog"> 
     <textarea rows="3" id="message">Type your message</textarea> 
     <br/> 
     <input type="button" id="sendmessage" value="Post" /> 
     <input type="hidden" id="displayname" /> 
     <input type="checkbox" id="enter-sends-message" />Enter sends message</div> 
</div> 

CSS -

div.container { 
    position: relative; 
} 
body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
} 
#wrapper { 
    position: relative; 
} 
#discussion { 
    width: 75%; 
    overflow-y: scroll; 
} 
#message { 
    border: 3px solid #cccccc; 
    width: 75%; 
} 
/* Set padding to keep content from hitting the edges */ 
.body-content { 
    padding-left: 15px; 
    padding-right: 15px; 
} 
/* Set width on the form input elements since they're 100% wide by default */ 
input, select, 
/* styles for validation helpers */ 
.field-validation-error { 
    color: #b94a48; 
} 
.field-validation-valid { 
    display: none; 
} 
input.input-validation-error { 
    border: 1px solid #b94a48; 
} 
input[type="checkbox"].input-validation-error { 
    border: 0 none; 
} 
.validation-summary-errors { 
    color: #b94a48; 
} 
.validation-summary-valid { 
    display: none; 
} 
#upper-wrapper { 
    position: relative; 
    width: 100%; 
    float: left; 
} 
#discussion-dialog { 
    /*border: 3px solid #cccccc;*/ 
    font-family: Tahoma, sans-serif; 
    position: relative; 
    float: left; 
} 
#available-rooms-dialog { 
    position: relative; 
    vertical-align: top; 
    float: left; 
} 
#message-line { 
    position: relative; 
} 
#message-dialog { 
    position: relative; 
    top: 10px; 
    font-family: Tahoma, sans-serif; 
} 
.clear { 
    clear: both; 
}