Html 当页面收缩CSS时，避免图像和标题移动到不合适的位置

早上好。我对CSS有点陌生，我想知道是否有人能告诉我，当我缩小页面时，如何阻止页眉的内容到处移动，以及如何防止它们相互重叠。我在网上查了一下，但还是没弄明白。谢谢

HTML

---

提供一些css将非常有帮助，或者可能是一个JSFIDLE示例，但是如果您试图设计一个响应性布局，那么您希望使用百分比而不是固定宽度

如果没有看到任何css，或者你希望它看起来像什么，我就说不出“到处移动”是怎么回事

要防止东西互相掉落，请尝试使用

float:left或
显示：内联在父级上

试试这个：

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

试试这个。使调整页面大小变得更容易。
如果您想将某些内容隐藏在不同的页面宽度，请查看。这些允许您定义在不同条件下应用的CSS规则，通常是页面宽度（也可以是设备方向或功能）。例如，如果您想在小屏幕上隐藏图片，可以执行以下操作：

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

这告诉浏览器，“当宽度小于768像素时，请使用以下规则；否则，请忽略它们。”
我道歉。我已经粘贴了CSS代码，显然在提交之前已经删除了它。给你@SimonStaton标题现在正在缩小，但会导致图片到处移动。我希望文本保持固定，并在缩小页面时消失。图片也一样。原始问题中没有提到，因此没有添加，如果您希望某个元素在调整大小时消失，则需要使用JQuery
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;
}

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