1

这是我将尝试在下面描述的示例：http: //jsfiddle.net/9E3yJ/17/

将屏幕尺寸调整为小于 930 像素时，右侧图像会在中心 div 标签下包含文本。有没有办法让中心 div 标签动态调整自身大小并换行，使最小宽度变为 67px，并且正确的图像不会在 div 标签下换行，直到只有中心 div 标签没有更多空间来换行(min-width=67px) 然后最终看起来像这样：http: //jsfiddle.net/9E3yJ/18/

谢谢你！

<style>
#logo {
display: block;
float: left;
line-height: 126px;
height: 130px;
max-width: 100%;
vertical-align: middle;
}

#logo img {
margin: 5px 0 5px 17px;
}

#topText{
width: 210px;
height: 130px;
line-height: 130px;
text-align: center;
float: left;
font-size: 16px;
text-transform: uppercase;
font-weight: bold;


}

#topTextchild{
display:inline-block;
line-height:1;
vertical-align: middle;
}

#longPic {
width: 468px;
height: 60px;
display: block;
float: right;
vertical-align: middle;
padding: 5px;
margin: 30px 17px 0 0;
background: rgb(190, 218, 247);
border: 1px solid rgb(0, 0, 0);
border-radius: 10px 10px 10px 10px;
}
</style
><div class="pageheader">


<div id="logo"><a href="http://www.sitelogo">
        <span></span>
        <img src="http://www.roirevolution.com/blog/2008/01/04/confusedbird.gif" alt="Logo">
        </a>
</div>



<div id="topText">
    <div id="topTextchild">
    The needed Header Text For the top of the page.
    </div>
</div>


<div> 
    <div id="longPic"> 
    <a href="http://www.sitepicture">
    <span></span>
        <img src="http://nature-drops.puzl.com/puzl/images/3000/3281/gallery/51c870b940060.jpg" alt="image">
    </a>

    </div>
</div>

<span class="helper"></span>

</div>

顺便说一句，我将尝试做的第二件事（在中心 div 标签不能再缩小并最终强制其下方的正确图像之后）是使用媒体标签为较小的屏幕设置不同的 css，并使中心文本 div 为全宽并将所有文本排列在右图上方的一行中。这将使中心文本被推到右侧图像上方，而不是让图像位于文本下方。

4

1 回答 1

0

我看到两个选项，除非可以使用 JavaScript。

第一的

采用

@media screen and (max-width: 830px) {
    ...
}

这里的例子：http: //jsfiddle.net/9E3yJ/20/

第二

用于页眉display: table及其子页- http://jsfiddle.net/9E3yJ/21/。display: table-cell

于 2013-10-02T16:41:11.930 回答