0

早上好。我对 CSS 有点陌生，我想知道是否有人可以告诉我如何在我缩小页面并相互合并时阻止我的标题内容移动到整个地方。我在网上查了一下，但我仍然无法弄清楚。谢谢

HTML

<header id= "top">
            <div id="title"><h1>Jorge </h1></div>
             <div id="quote"><h6></br></br>quote here
             <br/><br/>anonymous</h6></div>
            <div id="pic">
                <a href="resume.pdf"><img src="images/one.jpg" title="See resume" height=250px align="middle"/></a>
            </div>

        </header>

CSS

h1{
    border: 1px solid black;
    font: bold 35px tahoma;
    text-shadow: rgba(110,110,110,.8) 2px 2px 2px;
    width: 400px;
}
h6{

    width: 400px;
    padding: 30px;
    float: right;
}
#pic{

    float: right;
    border:3px solid white;
    -webkit-box-shadow: rgba(110,110,110,.6) 5px 5px 7px;
    -webkit-border-radius: 5px;
    padding: 10px;
    -webkit-transition: -webkit-transform 2s, background 1s;

}

#pic:hover{
     -webkit-transform: scale(1.1, 1.1);
    background: #1ec7e6;

}
4

3 回答 3

0

如果你想让一些东西隐藏在不同的页面宽度，请查看CSS Media Queries。这些让您可以定义适用于不同条件的 CSS 规则，通常是页面宽度（但也可能是设备方向或功能等）。例如，如果你想在小屏幕上隐藏你的图片，你可以这样做：

@media (max-width: 768px) {
    #pic {
        display: none;
    }
}

这告诉浏览器，“当你的宽度小于 768 像素时，使用以下规则；否则，忽略它们。”

于 2013-08-29T14:43:10.123 回答
0

试试这个960 格系统。使调整页面大小更容易。

于 2013-08-29T14:22:03.997 回答
0

提供一些 css 会有很大帮助，或者可能是一个 jsfiddle 示例，但如果您尝试设计响应式布局，那么您希望使用百分比而不是固定宽度

在没有看到任何 CSS 或您希望它看起来像什么的情况下，我无法说出“到处移动”正在发生的事情并不是很具体。

要阻止事物彼此掉落，请尝试float: left;在元素或display: inline;父级上使用

尝试这个：

h1{
    border: 1px solid black;
    font: bold 35px tahoma;
    text-shadow: rgba(110,110,110,.8) 2px 2px 2px;
    width: 50%;
    float: left
}
h6{
    width: 50%;
    padding: 30px;
    float: right;
}

#pic{
    float: right;
    border:3px solid white;
    -webkit-box-shadow: rgba(110,110,110,.6) 5px 5px 7px;
    -webkit-border-radius: 5px;
    padding: 10px;
    -webkit-transition: -webkit-transform 2s, background 1s;
}

#pic:hover{
     -webkit-transform: scale(1.1, 1.1);
    background: #1ec7e6;
}
于 2013-08-29T14:19:25.900 回答