如何使一个div标签占据网页右侧一半的空间？

Question

这是一个基础的HTML问题。

我有一些div标签，其中包含一些控件，占据了屏幕的左半部分。

我想要一个div标签在右侧显示一些消息？我尝试使用以下代码：

float = right;

在我的CSS类中，似乎没有起作用。我需要设置哪些其他属性。

以下是代码示例：

<div class ="header_label">
@Html.GetLocalizedString("program_snapshotRecipientAdress")&nbsp; @Html.TextBox("txtRcpntAdress")
</div>

   <div class ="header_label">
@Html.GetLocalizedString("program_snapshotUsertype1") &nbsp; @Html.RadioButton("Usertype", "One", new { id="rb1"})
 &nbsp; &nbsp;
@Html.GetLocalizedString("program_snapshotUsertype2") &nbsp; @Html.RadioButton("Usertype", "Two", new { id = "rb2" })
<div class ="commentsHeight"></div>
 </div>
   <div class ="header_label">
@Html.GetLocalizedString("program_snapshotDate") &nbsp; @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>

- KeenUser

---

你需要添加一些代码以获得帮助。不展示就不知道。可能需要使用绝对定位。 - Matt

你能发一些更多的代码吗？谢谢。 - Umer Hayat

Answer 1

我不是很理解你的问题，但我会尝试回答。如果你在左侧有一些div，并且你想要另一个div在右侧，你有两个选择：

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) 第二种方法是将每个 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>

- Marco Pace

---

这正是我在寻找的。谢谢，它有效了。现在我不需要使用任何CSS类来渲染，对吧？你能解释一下直接使用样式属性和使用来自CSS文件的类（如div class="something"并在“something”中定义浮动和宽度）之间的区别吗？ - KeenUser

如果你的网站有很多页面，使用类是更好的解决方案，这并没有什么“大的区别”：如果你只使用 'style="something"'，并且需要更改某些内容，你必须修改所有页面；如果你使用一个类，你只需要修改一个文件就可以了;-) - Marco Pace

Answer 2

1. 你确定你正确地命名了这个 div 吗？

2. 你的命令正确的写法是：

   float : right;
   

3. 如果你想让你的 div 占据屏幕的一半，你应该写类似于：

   width : 50%;
   

- TGM

Answer 3

你可以通过多种方式使一个 div 占据屏幕的右侧，其中之一是“浮动”，正如你所发现的那样。

这将使元素脱离文档的正常“流程”，并允许它根据父元素等占据屏幕的不同区域。

一眼看去，你需要编写：

float: right;

在你的CSS中，不要使用=，但如果你能以更完整的形式发布一些HTML和CSS，那就可以提供一些更好的建议。

- dougajmcdonald

Answer 4

如果你想将表单或其他内容分成两个部分或网格，请使用以下代码： float: right; width: 50%;

- Ali Sheikh