html - CSS 样式化一个 div 以站在一个 div 中(Chrome 行为)

Question

我正在制作一个商业网站，但遇到了困难。

因此，如果您单击上面的链接，您应该会看到一个渐变图形，我用它来分隔 Logo 和文本。现在，如果您在 Google Chrome 的最新版本中打开它，您应该会看到它没有正确显示在 Logo 的右侧。

我的 HTML 结构:

<div class="header">
    <a href="/?lang=en">
        <div class="logo">
            <div class="logo-container">
                <img src="/assets/imagesets/logos.gif" alt="Winslow Logo" height="100" width="138" />
                <div class="side-border"></div>
            </div>
            <div class="text-container">
                <h1 class="tag">Winslow Hotels</h1>
            </div>
        </div>
    </a>
    <!-- ... -->
</div>

CSS:

div.header
{
    max-width: 800px;
    height: 100px;
    margin: 1% auto;
    margin-bottom: 10%;
    border-radius: 15px 15px 15px 0px;
    background-color: #FFFFFF;
}

div.logo
{
    display: block;
    width: 800px;
    height: 100px;
}

div.logo-container
{
    width: 140px;
    height: 100px;
    float: left;
    display: inline-block;
}

div.side-border
{
    width: 2px;
    height: 100px;
    float: right;
    display: inline-block;
    background-image: url("/assets/imagesets/side-border.png");
}

div.text-container
{
    display: inline-block;
    width: 660px;
    float: right;
    height: 100px;
    font-family: Arial;
    font-size: 5em;
    padding: 1.5%;
}

div.menu-container
{
    display: block;
    width: 250px;
    position: fixed;
    top: 8%;
    left: 0px;
}

此代码适用于所有其他浏览器 Google Chrome。这是 Chrome 中的错误还是我必须向我的 CSS 添加 hack 才能修复它？

编辑:

div.side-border 没有位于 div.text-container 旁边，也没有出现在 div.logo-container 中.

Answer 1

似乎是宽度和 float 的问题。有很多不必要的代码我不会解决，但是，我向您推荐的是，使用 pseudo-selector (:after) 而不是单独的 div (.side-border) 来实现你的结果:

.logo-container {
   position:relative;
}

.logo-container:after {
    width: 2px;
    height: 100px;
    display: block;
    background-image: url("/assets/imagesets/side-border.png");
    content: '';
    position: absolute;
    right: 0; top: 0;
}

并从 HTML 和 CSS 中删除 .side-border。

---

编辑再想一想，这还可以进一步简化。只需将渐变边框图像作为 background 添加到 .logo-container 并将其放置在右侧:

div.logo-container {
    width: 140px;
    height: 100px;
    float: left;
    display: inline-block;
    background: url("/assets/imagesets/side-border.png") no-repeat right;
}