0

今天早上我一直在我们公司的网站上工作，但遇到了一些问题。我将页面格式化为两个单元格，一个在右侧，一个在左侧。右边的包含一张大约 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;
}
4

4 回答 4

2

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

#wrapper {
    min-width: 900px;
}

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

这是和示例小提琴

于 2012-06-07T18:35:07.377 回答
0

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

.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);
}
于 2012-06-07T18:33:27.240 回答
0

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

试试这个小提琴。

还有一件事，你float: left在两者中loginSide都使用了imageSide，只是在 中使用它loginSide，imageSide而不是自动调整。

这是更新的 小提琴。

最后，如果你想要自己的代码没有任何改动，我也为你准备了这个。:)

这是您的第二个更新的小提琴imageSide width:792px也是..

干杯.. :)

于 2012-06-07T18:36:22.480 回答
0

想通了，我将图像包装在这个 div 中：

<div style = "overflow: hidden;">
于 2012-06-07T18:58:41.947 回答