html - 流体宽度的 CSS 样式

Question

My site here是流动宽度，但带有搜索栏和图像的中间标题部分在 IE、Chrome 或 FF 中无法正确调整大小。

我尝试过使用媒体屏幕样式表来获得较低的屏幕分辨率，但这只会导致在某些浏览器中右侧图像的右侧有一个间隙，它们显示的宽度不同。

如果任何人都可以在不同的分辨率和浏览器下查看它，那会很棒，并且可能会提供任何建议。

目前在 IE9 中，当它略微缩小到 1263px(大约 1250px)以下时，图像会完全跳下来，看起来很糟糕。

这是 CSS:

/*Town Image */
#town-image-search {
box-shadow:0 5px 5px #CCC;
background:0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa',endColorstr='#e4e4e4');
border-top:1px solid #D6D2D5;
border-bottom:#d1d1d1;
}

#search-bar {
float:left;
width:16.5%;
padding:8px 15px;
}

input#search {
width:100%;
height:22px;
color:#aaa;
text-indent:10px;
border:1px solid #d6d6d6;
font-size:14px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
margin:0 0 6px;
padding:0;
}

input#submit {
width:100%;
border:1px solid #666;
height:22px;
color:#fff;
text-shadow:0 1px 0 #555;
background-color:#803C6D;
font-family:'Arial Rounded MT Bold';
cursor:pointer;
-webkit-border-top-right-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:0;
}

#middle-top {
height:68px;
float:left;
width:81%;
border-left:1px solid #Fafafa;
}

#town-name {
word-spacing:5px;
position:relative;
z-index:0;
float:left;
font-family:'arial rounded mt bold';
font-size:36px;
color:#354057;
line-height:69px;
text-indent:27px;
letter-spacing:-3px;
}

#town-name span {
font-family:'arial rounded mt bold';
color:#354057;
}

img#heart {
float:right;
width:230px;
height:68px;
position:relative;
z-index:10;
margin-right:-120px;
}

img#town-image {
width:404px;
height:68px;
float:right;
}

任何想法将不胜感激。

Answer 1

#middle-top float:right 并将宽度更改为 80%