Html 三列CSS布局

在发布这个问题之前，我看了一些其他的问题。没有什么能完全满足我的要求

我的目标是创建一个三栏布局，但在中间栏的页面顶部的中心挂上一个“Tout”。该招徕应该与我们的公司标志进一步向下的页面，与该页面下流动的文本

HTML很简单，容器中有三个div，然后是徽标的div，然后是正文副本：

    <div class="container">
    <div class="topcontain">
        <div class="topleft">testing left</div>
        <div class="topcenter"><img class="floatimg" src="toutdemo.png"></div>
        <div class="topright">testing right</div>
    </div>
    <div class="bodypart">
        <div class="logo"><img src="demologo.png"></div>
        <div class="bodycopy">
            <p>Lorem ipsum dolor sit amet...etc</p>
        </div>
    </div>
    </div>

我把一个半成品放在一起，展示了我的两个问题：

布局在大尺寸时效果很好，但当视口变窄时，右栏会下降和/或想要缩在中间（在浏览器中比在小提琴中更容易看到）

部分原因在于问题1，有时很难让招徕者和标识保持一致

---

是的，最终这将使用流体图像，但目前一切都是静态的。似乎是一个简单的布局…但不是

这是因为中心div的宽度固定，而左侧和右侧的宽度为35%。您可以从“topright”div中删除宽度，或在“topcenter”类中设置最大宽度：30%

我已更新了您的小提琴：

在左侧和右侧浮动div上：

width: calc(50% - 128px);

左、右div将共享剩余空间减去设置的中心宽度（除以2）

在徽标上：

.logo { clear: left; }

并瓦解边界：

.topcontain > div {     
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

---

我还添加了一个“clearfix”类，它很适合只使用浮动元素的容器。

我不熟悉html/css中的“tout”是什么意思？“tout”是一个营销术语，表示您确实希望用户在页面上看到的东西。啊，很酷，谢谢。学到了一些新东西在那把小提琴中，右柱出现在中柱的左边。我还尝试了你的代码更改，虽然它更好地保持了图像和tout的一致性…我是否遗漏了什么？你是否打算在左栏和右栏中填充任何内容？另外，您是否希望三列大小相等，但要将招徕者放在中间？好问题。左侧和右侧列只需要在标题中包含一些小内容。左栏有一个单词，右栏有一组社交媒体链接。所以左右两边的尺寸不能低于最小值，但除此之外没有问题。我之前也提到过，从长远来看，中心图像显然需要缩放…这非常有帮助！有什么方法可以防止左、右cols完全崩溃？最小宽度似乎不起作用…看看这个是否足够好，当宽度小于280px时会引起麻烦，但这是没有设备的宽度小于280px。宽度计算——类似于泰摩提出的——非常有用。这个解决方案的唯一问题是，在较小的宽度下，中心柱落在左边，右边落在中间。我不担心这一点。如果您设计的屏幕宽度小于300px，请在容器上放置一个最小宽度，那些使用智能手表的用户将不得不等待，直到您实现媒体查询。

.topcontain > div {     
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}