0

有没有办法让两个元素在同一个容器中并排浮动，而当窗口大小减小时，最右边的元素不会被挤压到下面？相反，我希望正确的元素被窗口覆盖。

这是CSS：

#logo {
margin-left: 400px;
float:left; 
}

#loginbox {
margin-top: 15px;
float:left;
height: 70px;
width: 375px; 
}

和html

<div class="header">
        <div id='logo'>
            <img id='logo-img' src='graphics/banner2.png' alt='Logo' height=200px width=700x />
        </div>
        <div id='loginbox' class='login'>
            <form id='login' >
                <span style="font-weight: bold; color: red;">Login</span>
                <br />
                <br />
                <input type="text" id='login-email' value='email' />
                <input type='text' id='login-password' value='password' />
                <input type='submit' value='login'/>
            </form>
        </div>
        <br style='clear:both' />
    </div><!-- end header -->

谢谢！！

4

5 回答 5

3

您需要为标题和单元格设置硬宽度：

http://jsfiddle.net/ByWM2/

<div class="header">
        <div id='logo'>
            <img id='logo-img' src='graphics/banner2.png' alt='Logo' />
        </div>
        <div id='loginbox' class='login'>
            <form id='login' >
                <span style="font-weight: bold; color: red;">Login</span>
                <br />
                <br />
                <input type="text" id='login-email' value='email' />
                <input type='text' id='login-password' value='password' />
                <input type='submit' value='login'/>
            </form>
        </div>
    </div><!-- end header -->​

.header { width:700px; overflow:hidden; }

#logo {
background:lime;
min-width:300px;
float:left; 
}

#loginbox {
background:cyan;
float:left;
height: 70px;
min-width: 400pxpx; 
}​
于 2012-08-02T20:21:49.163 回答
0

有几种方法可以解决这个问题，这里有一个：

假设左列的宽度已知，您可以将右列设置为绝对位置，并将其左边距设置为左列宽度的宽度，以便正确定位。您还必须将父 div 的位置设置为相对位置才能使其正常工作。这是小提琴：

http://jsfiddle.net/JKXrV/1/

于 2012-08-02T20:32:03.000 回答
0

您可以设置一个min-widthfor #loginbox：

#loginbox {
  margin-top: 15px;
  float:left;
  height: 70px;
  min-width: 200px; /* set this to the max width you'd like it to squeeze to */
  width: 375px; 
}
于 2012-08-02T20:24:05.997 回答
0

放置两个浮点数中最大的一个<div></div>或height: 70px任何一个，然后将其设置为具有一个min-width: 200px;或，再次，任何您希望最小的宽度。

希望这可以帮助。

于 2012-08-02T20:24:54.197 回答
0

解决方案 1：如果容器（标题）的宽度或最小宽度等于或大于 2 个 div 的宽度，如果这 2 个都是已知宽度。您在#logo 上没有宽度，但我通常认为徽标具有可靠（即恒定）宽度。

 #header{width: 900px; /*or whatever*/}

解决方案 2：使用 css3 属性（需要 IE9+ 或很酷的浏览器之一： http: //caniuse.com/#feat=css-table）：

 #header{display:table}
 #logo, #loginbox{display:table-cell}
于 2012-08-02T20:29:27.260 回答