Question

早上好。我对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;

}

Answer 1

提供一些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;
}

Answer 2

尝试一下960 grid system。使页面调整更容易。

Answer 3

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

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

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

当页面缩小CSS时，避免图像和标题移出位置

3 个答案: