html - 如果分辨率很小(或者您稍微调整浏览器大小)，标题中的图像会彼此下方

Question

所以，我正在制作这个页面: http://www.fasade-petek.si/

标题有 3 张图片( Logo 、文本、facebook)- 这是里面的:

<div id="FB_GPlus_logo">
    <a href="http://www.facebook.com/5ekdoo" target="_blank">
        <img src="img/Facebook_Logo.png" width="40px" height="40px"></img>
    </a>
</div>
<div id="logo">
    <a href="index.html"><img src="img/logo.png" height="80" width="214"></img></a>
    <a href="storitve.html"><img src="img/Napis.png" height="80" width="448"></img></a>
</div>

logo 和文本(图像)使用边距定位，facebook 是 float:right。

#FB_GPlus_logo {
float: right; /* add this */
position: relative;
padding-top: 35px;
}

#logo {
/* border: 1px solid #FF0004; */
/* Na sredino */
display: table;
margin: 0 auto;
overflow: hidden; /* if you don't want #second to wrap below #first */
padding-right: 170px;
}

#logo a {
padding-right: 250px;
}

如果你有宽屏，一切看起来都不错，但如果你稍微调整窗口大小， Logo 和文本会在彼此下面，解决这个问题的最佳方法是什么？如果它只是停留在原处并且​​您必须滚动(左右)，我会很高兴，或者有更好的方法来解决这个问题吗？如果您也在移动设备(纵向)上查看标题，我敢肯定标题会看起来很糟糕。

我想做的是:

• 文本(图片)应位于页眉的中央
• Logo 应该在文字(图片)的左边一点(比如 logo 左边 200px)
• Facebook 标志应该在右边

Answer 1

基本上，您需要在左 Angular 和文本图像之间放置 Logo 。要实现完美对称，您需要更改标记。 将 html 更改为:

<div id="logo">
    <a href="index.html"><img src="img/logo.png" height="80" width="214"></img></a>
    <a href="storitve.html"><img src="img/Napis.png" height="80" width="448"></img></a>
<div id="FB_GPlus_logo">
    <a href="http://www.facebook.com/5ekdoo" target="_blank">
        <img src="img/Facebook_Logo.png" width="40px" height="40px"></img>
    </a>
</div>
</div>

现在选择#logo div 中的所有元素，并使它们全部向左浮动并按比例宽度

#logo > a, FB_GPLUS_logo {
float : left;
width:33%;
min-height:80px;
text-align:center;
}

这将创建三个宽度为 33% 的 div，从而几乎占据标题，并且 div 中的所有内容都将居中对齐。最后一点，因为所有元素都是 float 的，所以您可能需要将这个“.clearfix”类应用到所有这三个 div 所在的父 div。

.clearfix:after {
content :'';
clear:both;
display:block;
}