Html 我想要一个导航和横幅图片，以适应旁边的标题标签的标志，我可以怎么做呢？

这是一份我正试图做的事情的草稿

我想要一个标志图像，左边是横幅的整个

高度

，右边是横跨

标题

其余

宽度

的图像顶部是

导航

在jsfiddle中没有跨越映像，但我希望它最终出现在那里

任何洞察都会很棒

<div class="site">
    <header id="header">
        <img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/c/c1/American-Eskimo-dog.jpg" />
        <nav>
            <ul>
                <li><a href="#">PAGE1</a>
                </li>
                <li><a href="#">PAGE2</a>
                </li>
                <li><a href="#">PAGE3</a>
                </li>
                <li><a href="#">PAGE4</a>
                </li>
                <li><a href="#">PAGE4</a>
                </li>
                <li><a href="#">PAGE4</a>
                </li>
                <li><a href="#">PAGE4</a>
                </li>
                <li><a href="#">PAGE4</a>
                </li>
            </ul>
        </nav>
    </header>
</div>

header .logo {
    padding: 25px;
    width: 142px;
    height: 200;
    background-color: rgba(0, 169, 199, 1.0);
    border: 4px solid rgba(150, 13, 117, 1.0);
    display: inline;
}
header nav {
    display: inline;
    line-height: 25px;
    border-bottom: 5px rgba(150, 13, 117, 1.0) solid;
    height: 200px;
}
header nav ul li {
    display: inline;
    margin-left: 0;
    padding: 0 6px;
    font-size: 25px;
    font-family: Bebas-Neue;
    list-style-type: none;
    top: 0px;
    -webkit-transition: top .3s ease-in-out;
    border-radius: 5px;
}
header nav ul li a {
    text-decoration: none;
    color: rgba(0, 169, 199, 1.0);
    text-shadow: -.3px .1px rgb(25, 128, 175);
}
.site {
    width: 1000px;
}
}

标题。标志{
填充：25px；
宽度：142px；
身高：200；
背景色：rgba（0,169,199,1.0）；
边框：4倍实心rgba（150、13、117、1.0）；
显示：内联；
}
标题导航{
显示：内联；
线高：25px；
边框底部：5pxRGBA（150,13117,1.0）实心；
高度：200px；
}
标题nav ul li{
显示：内联；
左边距：0；
填充：0 6px；
字体大小：25px；
字体系列：Bebas Neue；
列表样式类型：无；
顶部：0px；
-webkit过渡：top.3s易入易出；
边界半径：5px；
}
标题nav ul li a{
文字装饰：无；
颜色：rgba（0,169,199,1.0）；
文本阴影：-.3px.1px rgb（25128175）；
}
.地点{
宽度：1000px；
}
}

我想这就是你想要的：

小提琴：

只需将图像的宽度更改为100%：

.bannerImage {
    width: 100%
}

并在整个导航块周围添加一个

navbox

：

#navbox {
    display: inline-block;
    width: calc(100% - 204px);
}

---

嘿，伙计们，我可以理解你们的沮丧，但是代码块很小，在stackoverflow上阅读比在小提琴上阅读要困难得多。也就是说，如果没有可视化，这个问题是无法回答的。@SamJacobs问题中的代码要点是，这个问题可以作为未来用户在类似问题上寻求帮助的参考。如果JSFIDLE被打倒或丢失，这个问题对任何人都没有用处。