CSS 表格 - 右侧不适合浏览器答案

【问题标题】：CSS Table - Right side doesn't fit in the browserCSS 表格 - 右侧不适合浏览器
【发布时间】：2012-06-11 20:32:34
【问题描述】：

今天早上我一直在处理我们公司的网站，但遇到了一些问题。我将页面格式化为两个单元格，一个在右侧，一个在左侧。右边的包含一张大约 790 像素宽的图像。当我将浏览器窗口缩小到不再适合的位置时，整个单元格会跳到第一个单元格下方。我怎样才能防止这种情况发生？

代码...

xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org   /TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Test
</title>
<link href="StyleSheet1.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form name="form1" method="post" action="default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTg2ODI4NzA2OWQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFCUNoZWNrQm94MU+tEbqmFYLAUCuNpKlG5GJdxlTP" />
</div>

<div>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwKUzskuAuzRsusGAoznisYGAuzR9tkMAuzRirUFAoLk17sJArursYYIEh1rVMqwd3ohPqFy9J1P74IvCz4=" />
</div>
<div style = "padding-left:15%;">
<div class = "header">
    <img src="images/logoclr.bmp" style="height:56px;width:253px;border-width:0px;" />
    <input name="TextBox1" type="text" id="TextBox1" style="width:414px;" />
    <input type="submit" name="Button1" value="Search" id="Button1" />
    </div>
    <br /><br /><br /><br /><br />
<div class="loginSide">
    <div class = "internalBox">
    Log On To Invoice Viewer
    </div>
    <br />
    <span>Login ID:</span>
    <br />
    <input name="TextBox2" type="text" id="TextBox2" />
    *<br />
    <br />
    <span id="Label1">Password</span>
    <br />
    <input name="TextBox3" type="text" id="TextBox3" />
    *<br />
    <br />
    <input id="CheckBox1" type="checkbox" name="CheckBox1" />
    Remember my Login ID<br />
    <br />
    <div style="padding-left:20px;"><input type="submit" name="Button2" value="Login" id="Button2" /></div>
    <br />
</div>
<div class = "imageSide">
    <img src="images/1_back11.jpg" style="border-width:0px;" />
</div>
</div>
</form>
</body>
</html>

css

body 
{
background-color:rgb(227,227,225);
font-family:Verdana;
font-size:.8em;
margin-left:auto;
}

.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:275px;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}

.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:792px;
padding:10px;
background-color:rgb(223,232,237);
float:left;

}

.internalBox
{
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
background-color:rgb(54,113,109);
color:White;
}

【问题讨论】：

“左边那个包含一个图像......”我猜你是指右边那个？

标签： asp.net css xhtml

【解决方案1】：

尝试为包含所有内容的 div 设置一个 id（例如 <div id="wrapper" style="padding-left:15%;">）并为其创建一个 CSS 选择器，并在其中指定最小宽度：

#wrapper {
    min-width: 900px;
}

您应该根据图像 div 不换行的最小宽度来选择宽度。当然，既然您有了包装器的选择器，您也可以将 padding-left 移动到 CSS 中，而不是将其内联。

Here's and example fiddle

【讨论】：

【解决方案2】：

您可以尝试使单元格的宽度动态化。如果您使用百分比而不是固定宽度，它将自动调整为窗口大小。

.imageSide
{
border-width:1px;
border-color:rgb(186,107,255);
border-style:solid;
width:70%;
padding:10px;
background-color:rgb(223,232,237);
float:left;

}

.loginSide
{
float:left;
border-width:1px;
border-right:0px;
border-color:rgb(186,107,255);
border-style:solid;
width:30%;
height:292px;
padding:10px;
background-color:rgb(223,232,237);
}

【讨论】：

【解决方案3】：

只是不要提供imageSide 的width，因为它必须根据浏览器窗口的剩余宽度进行调整，而loginSide 必须坚持自己的实心宽度。

试试这个fiddle。

还有一点，您在loginSide 和imageSide 中都使用了float: left，只需在loginSide 使用它，imageSide 会自动调整。

这是更新fiddle。

最后，如果您想要自己的代码而不做任何改动，我也为您准备了这个。 :)

这里是你的second updated fiddle 和imageSide width:792px 还有..

干杯.. :)

【讨论】：

【解决方案4】：

想通了，我把图像包裹在这个 div 中：

<div style = "overflow: hidden;">

【讨论】：