0

当我调整浏览器窗口的大小时，图像会缩小（应该如此），但会在其 div 内向上和向左缩小。是什么决定了它收缩的方向，我可以选择吗？

示例在这里：http ://cdpn.io/FdIKv （缩小页面查看）

如何使文本缩小而不是重叠/被重叠的奖励。

谢谢！

编辑：抱歉，这里是代码：

<style type="text/css">
#logo-div {
    max-width: 24%;
    width: 24%;
    height: auto;
    clear: both;
    z-index: 0;
    float: right;
    overflow: hidden;
}

#site-logo {
    max-width: 100%;
   display : block;
   margin : 0 auto;
    }


#site-title a {
    color: #CB2027;
    font-size: 2.7em;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

#site-title {
    margin-right: auto;
    width: 80%;
    position: relative;
    overflow: hidden;
}

#site-description {
    color: #000000;
    font-size: 2.340em;
    position: relative;
    overflow: hidden;
    width: 76%;

}

#branding hgroup {
    max-width: 60%;
float: left;
width: 60%;
}

</style>
<header id="branding" role="banner">
<!--<div id="logo-and-hgroup">-->
<div id="logo-div"><img id="site-logo" src="http://farm6.staticflickr.com/5016/5421726832_eb5c0e25fc_m.jpg" alt="" /> </div>
    <hgroup>

<h1 id="site-title">
<a href="http://google.com/" title="Thisisone ATest" rel="home">Thisisone ATest</a>
</h1>
                <h2 id="site-description">This is where the description will go</h2>



            </hgroup>
4

1 回答 1

1

默认情况下，所有内容都会向左上角缩小。向顶部收缩是因为大多数人类书写系统是从上向下运行的——这是公认的普遍惯例。从左到右更具争议性——有许多从右到左的数字书写格式（例如阿拉伯语），可以使用 CSS{direction: rtl}或 HTML 属性指定dir="rtl"。

所以默认情况下，所有内容都从左上角开始，向右延伸，当不可用时返回到下面的下一个可用空间。默认情况下，一个display: block元素（如 a div）将占据它可用的全部宽度——这意味着，如果没有任何额外的 CSS，以下内容将出现在它的下方。

但是，您的代码指定#logo-div包含您的 image 的that#site-logo应该float: right——这意味着它将拥抱其容器的右侧边缘（#branding标题，如所讨论的那样占据整个可用宽度）。默认情况下，浮动元素会缩小它们的宽度以适应它们的内容，但它也有一个设置为百分比的宽度，这意味着它会根据可用的宽度缩小或扩大。

您不能float向上或向下 - 只能向左和向右 - 但您可以使用position: absoluteto define bottom: 0，这将强制其底部边缘与最近的相对定位的祖先（在本例中为视口）的底部边缘相匹配。但是，就像当你指定一个浮点数时，一个块会忽略它的自然全角，向下序列位置，绝对定位意味着浮点数被忽略（你也可以设置左值和右值）。

为您创建了一个演示，其中一些属性应用于探索差异。

于 2013-03-04T19:42:14.910 回答