Question

以下是我将在下面尝试描述的示例：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是全宽并排列右图上方一行中的所有文本。这将使中心文本被推到右图像上方而不是将图像放在文本下面。

Answer 1

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

第一

使用

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

此处示例：http://jsfiddle.net/9E3yJ/20/

第二

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

根据页面调整大小和可用空间动态调整Div标签中的文本大小

1 个答案:

第一

第二