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

早上好。我对CSS很陌生，我想知道如果有人能告诉我如何在页面缩小和合并之后停止移动头部的内容。我在网上查了一下，但我仍然无法弄清楚。由于当页面缩小时避免图像和标题移出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; 

}

来源

2013-08-29 jorgeAChacon

提供了一些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-29 14:19:25

我很抱歉。我粘贴了CSS代码，并且在提交之前显然已将其删除。这里是。 @SimonStaton – jorgeAChacon

标题现在正在缩小，但正在导致图片遍布整个地方。我希望文本在页面缩小时保持不变并消失。相同的图片。 – jorgeAChacon

原来的问题没有提到，所以没有添加，如果你想要一个元素消失在调整大小，你将需要使用jQuery –

尝试了这一点960 grid system。使页面大小调整更容易。

来源

2013-08-29 14:22:03 Twifty

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

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

这告诉浏览器，“当你是小于768个像素宽，使用如下规则;否则，忽略它们。“

来源

2013-08-29 14:43:10

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

回答

相关问题