在CSS中定位DIV的问题

Question

我正在尝试将“可用房间对话框”div移动到textarea的右侧，并改为“可用房间位于顶部。”我尝试使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

一种选择是将available-rooms-dialog移到HTML中的discussion-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;   
}