Html 如何让 div 标签占据网页右侧的一半？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7873833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Do I make a div tag occupy the half of the right hand side of my Web page?
提问by KeenUser
It is a basic HTML question.
这是一个基本的 HTML 问题。
I have some div tags, which have some controls and occupy left half of my screem.
我有一些 div 标签，它们有一些控件并占据了我的尖叫声的左半部分。
I Want to have a div tag to display some messages in the right side? I used somthings like:
我想要一个 div 标签来在右侧显示一些消息？我使用了类似的东西：
float = right;
in my css class. It didn't seem to work. What other properties I need to set.
在我的 css 课上。它似乎不起作用。我需要设置哪些其他属性。
Here is the code sample
这是代码示例
<div class ="header_label">
@Html.GetLocalizedString("program_snapshotRecipientAdress") @Html.TextBox("txtRcpntAdress")
</div>
<div class ="header_label">
@Html.GetLocalizedString("program_snapshotUsertype1") @Html.RadioButton("Usertype", "One", new { id="rb1"})
@Html.GetLocalizedString("program_snapshotUsertype2") @Html.RadioButton("Usertype", "Two", new { id = "rb2" })
<div class ="commentsHeight"></div>
</div>
<div class ="header_label">
@Html.GetLocalizedString("program_snapshotDate") @Html.TextBox("SnapshotDate")
</div>
<div id ="CMSContent">
<div class ="CMS-message">
@Html.Raw("S=This is the div I need to place in the right hand side")
</div>
</div>
回答by Marco Pace
I didn't understand your question so much, but I'll try to answer. If you have some div on the left and you want another one on the right you have two choice:
我不太明白你的问题，但我会尽力回答。如果左侧有一些 div 并且希望右侧有另一个 div，则有两种选择：
1) The first one is to set one div on the right and another on the left:
1）第一个是在右边设置一个div，在左边设置另一个：
<div>
<div style="float: left; width: 50%">I'm on the left</div>
<div style="float: right; width: 50%">I'm on the right</div>
</div>
2) The second one is to set every div on the left
2）第二个是设置左边的每个div
<div>
<div style="float: left; width: 50%">I'm on the left</div>
<div style="float: left; width: 50%">I'm on the second on the left</div>
</div>
回答by TGM
- Are you sure that you named the div correctly?
the correct way to your command is
float : right;If you want your div to be half of your screen you should write something like:
width : 50%;
- 您确定您正确命名了 div 吗？
您的命令的正确方法是
float : right;如果你想让你的 div 成为你屏幕的一半，你应该这样写：
width : 50%;
回答by dougajmcdonald
You can make a div occupy the right hand side of the screen in a multitude of ways, one of which is 'floating' as you've found.
您可以通过多种方式使 div 占据屏幕的右侧，其中之一是您发现的“浮动”。
This takes the element out of the normal 'flow' of the document and allows it to occupy a different area of the screen depending on parent elements etc.
这会将元素从文档的正常“流”中取出，并允许它根据父元素等占据屏幕的不同区域。
At a glance you would need to write:
一目了然，您需要编写：
float: right;
In your CSS, rather than =but if you could post some html and css in a more full form, some better advice can be provided.
在您的 CSS 中，=如果您可以以更完整的形式发布一些 html 和 css，则可以提供一些更好的建议。
回答by Ali Sheikh
if you want to show your form or something in two halfs or grids use this: float: right; width: 50%;
如果你想显示你的表格或两半或网格的东西，请使用： float: right; 宽度：50%；
