Css 在调整窗口大小时，元素如何选择收缩到哪个角？

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

这里有一个例子： （缩小页面以查看）

如何使文本缩小而不是重叠/被重叠的额外功能

谢谢

编辑：抱歉，以下是代码：

<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>

#标志组{
最大宽度：24%；
宽度：24%；
高度：自动；
明确：两者皆有；
z指数：0；
浮动：对；
溢出：隐藏；
}
#网站标志{
最大宽度：100%；
显示：块；
保证金：0自动；
}
#网站名称a{
颜色：#CB2027；
字号：2.7em；
右边距：自动；
位置：相对位置；
溢出：隐藏；
}
#网站名称{
右边距：自动；
宽度：80%；
位置：相对位置；
溢出：隐藏；
}
#站点描述{
颜色：#000000；
字号：2.340em；
位置：相对位置；
溢出：隐藏；
宽度：76%；
}
#品牌化集团{
最大宽度：60%；
浮动：左；
宽度：60%；
}
这就是描述的方向

默认情况下，所有内容都会向左上角收缩。向顶端收缩是因为大多数人类书写系统是自上而下运行的，这是一个公认的普遍惯例。从左到右更具争议-有许多从右到左的数字书写格式（例如阿拉伯语），可以使用CSS

{direction:rtl}

或HTML属性

dir=“rtl”

指定

因此，默认情况下，所有内容从左上角开始，向右延伸，并在不可用时返回到下面的下一个可用空间。默认情况下，

display:block

元素（如

div

）将占据其可用的全部宽度-这意味着，在没有任何额外CSS的情况下，以下内容将显示在其下方

但是，您的代码指定包含图像的

#logo div

，应该

浮动：right

——这意味着它将紧靠其容器的右边缘（前面讨论的

#branding

标题占据了全部可用宽度）。默认情况下，浮动元素会缩小其宽度以适应其内容，但其宽度也设置为百分比，这意味着它将根据可用宽度缩小或扩展

您不能

向上或向下浮动

只能向左和向右浮动，但可以使用

位置：绝对

定义

底部：0

，这将强制其底部边缘与最近相对定位的祖先（在本例中为视口）的底部边缘匹配。但是，就像指定浮点值一样，块将忽略其自然全宽、向下序列位置，绝对定位意味着忽略浮点值（不过，您也可以设置左右值）

---

为您创建，并应用其中一些属性来探索差异。

您需要发布问题代码以及指向您的站点/jsfiddle/等的链接。图像不会向任何方向收缩。它只是基于其父元素的宽度而逃避。图像保持其纵横比（意味着高度与宽度成比例收缩）。你的问题不是很明确。请包括您的问题代码，并告诉我们您遇到了哪些问题。对不起，我没有很好地解释。当图像收缩时，它的中心向左上移动，因此它“粘住”顶部，从而从页面底部“移开”。实际上，它是“锚定”到顶部的。它实际上是粘在右上角的，这是因为它的父元素“#logo div”是“float:right”。图像将始终保持其父级定义的右侧。这非常有用！非常感谢Barney，现在对我来说很有意义。顺便说一句，有没有可能让文本收缩而不是包装？恐怕不行！文本呈现本身就很奇怪，取决于

字体大小

。在本机上，您可以任意

转换

元素（使用

缩放

速记），但您指定的任何内容都将与已计算的元素维度相关（无论它们基于CSS的其余部分）。此外，这是包含文本的元素，因此文本只会收缩。虽然有一些Javascript库：[FitText]（fittextjs.com）将修改字体大小以填充容器宽度。非常感谢Barney，我将对此进行研究。你让我的日子轻松多了！