Question

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

Answer 1

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

#wrapper {
    min-width: 900px;
}

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

Here's and example fiddle

Answer 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);
}

Answer 3

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

试试这个fiddle。

还有一件事，您在float: left和loginSide中使用imageSide，只需在loginSide，imageSide使用它，而不是自动调整。< / p>

以下是已更新 fiddle。

而且，最后如果你想要自己的代码没有任何太多的替代，我也得到了这个。：）

以下是您的second updated fiddle imageSide width:792px也是..

干杯...... :)

Answer 4

想出来，我把图像包裹在这个div中：

<div style = "overflow: hidden;">

CSS表 - 右侧不适合浏览器

4 个答案: