Question

当我调整浏览器窗口的大小时，图像会缩小（应该如此）但会缩小并在其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>

Answer 1

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

因此，默认情况下，所有内容都从左上角开始，向右延伸，并在不可用时返回到下一个可用空间。默认情况下，display: block元素（如div）会占用可用的全部宽度 - 这意味着，如果没有任何额外的CSS，则会在其下方显示以下内容。

但是，您的代码指定#logo-div，其中包含您的图片#site-logo，float: right - 意味着它将拥抱其容器的右边缘（{{1}标题，如讨论占用完整的可用宽度）。默认情况下，浮动元素会缩小其宽度以适合其内容，但它的宽度也设置为百分比，这意味着它将根据可用宽度缩小或展开。

你不能#branding向上或向下 - 只能向左或向右 - 但你可以使用float定义position: absolute，这会迫使其底边与底边相匹配最近的相对定位的祖先（在这种情况下是视口）。但是，就像指定一个浮点数一样，一个块将忽略它的自然全宽，向下的序列位置，绝对定位意味着忽略float（你也可以设置左右值）。

为您创建a demo，其中一些属性应用于探索差异。

元素如何选择在窗口大小缩小时缩小哪个角？

1 个答案: