0

今朝、会社のウェブサイトで作業をしていて、ちょっとした問題にぶつかりました。ページを 2 つのセル (右側に 1 つ、左側に 1 つ) にフォーマットしました。右側の画像には、幅約 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

ブラウザウィンドウの残りの幅に合わせて調整する必要がある一方で、独自の実線widthの幅に固執する必要があるため、のを提供しないでください。imageSideloginSide

このフィドルを試してみてください。

もう1つfloat: left、両方loginSideでimageSide使用していて、で使用するだけでloginSide、imageSide自動的に調整されます。

これが更新された フィドルです。

そして最後に、あなたがあまり高度なことをせずにあなた自身のコードが欲しいなら、私はあなたのためにもこれを手に入れました。:)

これが2番目に更新されたフィドルですimageSide width:792px。

乾杯.. ：）

于 2012-06-07T18:36:22.480 に答える
0

それを理解して、私はこのdivで画像をラップしました：

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