Html 创建基于内容大小的响应网格，而不使用flexbox、CSS网格、calc或javascript、IE9+；顺从的_Html_Css

Html 创建基于内容大小的响应网格，而不使用flexbox、CSS网格、calc或javascript、IE9+；顺从的

html css

Html 创建基于内容大小的响应网格，而不使用flexbox、CSS网格、calc或javascript、IE9+；顺从的,html,css,Html,Css,G'day 我正在一个响应性网站上工作。这就是我试图使标题部分分别在桌面和移动设备上的外观： id=“header”的内容应该占据尽可能多的空间，但不超过页面宽度的100%。我很难想出一个结构，可以转变为响应和创建网格一般。有没有类似的网格我可以看一下？或者我应该简单地使用一个表，而不是试图提出一个“仅CSS”的解决方案如果能找到一个适合我目前结构的解决方案，我将不胜感激。请让我知道，如果有什么我需要提到，使这个问题可以理解（如果不是），并提前感谢您提供的任何帮助我已经阅读了许多教程和sta

G'day

我正在一个响应性网站上工作。这就是我试图使标题部分分别在桌面和移动设备上的外观：

id=“header”

的内容应该占据尽可能多的空间，但不超过页面宽度的100%。我很难想出一个结构，可以转变为响应和创建网格一般。有没有类似的网格我可以看一下？或者我应该简单地使用一个表，而不是试图提出一个“仅CSS”的解决方案

如果能找到一个适合我目前结构的解决方案，我将不胜感激。请让我知道，如果有什么我需要提到，使这个问题可以理解（如果不是），并提前感谢您提供的任何帮助

我已经阅读了许多教程和stackoverflow问题，其中也有类似的布局，我尝试了许多使用

position

和CSS表的方法，但到目前为止我还没有成功

这是我的HTML：

<!DOCTYPE html>
<html>
<head lang="en-au">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div id="container" class="dtable">
        <div id="header" class="dtrow">
            <div class="dtable">
                <div class="dtrow">
                    <div class="dtcell" id="logo"></div>
                    <div class="dtcell">
                        <div class="dtable">
                            <div class="dtcptn">
                                <span class="cblock" id="menu">
                                    <a href="#">Link #0</a>
                                    <a href="#">Link #1</a>
                                    <a href="#">Link #2</a>
                                    <a href="#">Link #3</a>
                                    <a href="#">Link #4</a>
                                    <a href="#">Link #5</a>
                                    <a href="#">Link #6</a>
                                    <a href="#">Link #7</a>
                                </span>
                            </div>
                            <div class="dtrow">
                                <div class="dtcell">
                                    <span class="cblock">Phone</span>
                                </div>
                                <div class="dtcell">
                                    <span class="cblock">Social</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="content" class="dtrow">

        </div>
        <div id="footer" class="dtrow">
            <span class="cblock">&copy; The three musketeers, 2017. Say hello to the UFO.</span>
        </div>
    </div>
</body>
</html>

下面是一个简单的示例，演示了如何在

display:table cell

和

display:block之间切换
请注意标记中的注释
，它消除了内联块元素的空白（这里有更多的方法：）

堆栈片段

.dtable{显示：表格；宽度：100%；}
.dtcell{显示：表格单元格；填充：10px；}
.dtcptn{显示：表标题；}
.dtrow{显示：表行；}
.dtcell：第一个孩子{
宽度：1px；
}
.dtcell：第一个子跨度{
显示：内联块；
边框：1px实心；
框大小：边框框；
}
.dtcell:第一个子跨度：最后一个子跨度{
显示：无；
}
.dtcell：最后一个子div{
边框：1px实心；
框大小：边框框；
}
.dtcell:最后一个子跨度{
显示：内联块；
宽度：50%；
边框：1px实心；
框大小：边框框；
}
@媒体屏幕和屏幕（最大宽度：600px）{
.dtcell：第一个孩子{
宽度：100%；
}
.dtcell:第一个子跨度：最后一个子跨度{
显示：内联块；
}
.dtcell，
.dtcell:最后一个子跨度{
显示：块；
宽度：自动；
}
.dtcell：最后一个子div{
显示：无；
}
}

标志
汉堡菜单
链接
电话社交
好吧，下面是我使用定位和伪元素的答案

@charset“utf-8”；
*{框大小：边框框；}
{显示：内联块；文本装饰：无；}
a:悬停{文本装饰：下划线；}
正文，html{字体系列：Helvetica，Arial，无衬线；字体大小：16px；高度：100%；边距：0；填充：0；背景色：#ffffff；}
img{边界：0；}
text区域{调整大小：无；}
输入[type=“button”]，输入[type=“submit”]{cursor:pointer；}
.dtable{display:table；}
.dtrow{显示：表行；}
span.cblock{display:inline block；padding:18px；border:2px实心透明；-webkit box shadow:inset 0px 0px 2px 2px rgba（200，200，200，0.5）；-moz box shadow:inset 0px 0px 2px 2px rgba（200，200，200，0.5）；-webkit边框半径：4px；-moz边框半径：4px；边框半径：4px；}
#容器{宽度：100%；高度：100%；}
#联系，#社会{宽度：50%；}
#内容{高度：100%；}
#页脚{文本对齐：居中；}
#页脚跨距{宽度：100%；}
#标题{位置：相对；文本对齐：中心；}
#标题>div{margin:0 auto；}
#header>div div{display:inline block；}
#header>div div:last child{margin left:100px；}
#徽标{宽度：100px；位置：绝对；顶部：0；底部：0；背景图像：url（'logo.png'）；背景大小：包含；背景重复：不重复；背景剪辑：填充框；}
#菜单{宽度：100%；}
#菜单：：在{content:'\000A'；空格：pre；}
#社交{文本对齐：右；}
@媒体屏幕和屏幕（最大宽度：768px）{
#联系，#社交{宽度：100%；}
/*增加了这两条规则*/
#社交{文本对齐：居中；}
#header>div div:最后一个子项{左边距：0；}
}

电话社交
&抄袭；《三个火枪手》，2017年。向不明飞行物问好。
因此，您将遇到的问题是，display:table
设计用于将非table元素转换为table“acting”元素。而桌子本身就没有响应性。我理解你为什么不想使用flextbox（因为你需要支持IE9），但是，你为什么不想使用浮动呢？多年来，Float得到了很好的支持。下面是一个简单的示例，展示了如何在显示：表格单元格
和显示：块
@LWilson之间切换，这是一个非常好的观点，谢谢。我将更新我的问题的标题。我不使用float的唯一原因是我不喜欢它们（它们会破坏流程，有时需要clearfix）。@LGSon，谢谢你，我喜欢你的解决方案！唯一的问题是使用calc（我意识到我的问题中没有提到它，所以这是我的错），因为（安卓版的我当然会将此作为一个答案发布，如果你觉得它有用，那么，如果你的位置
/伪是一个小变化，你可以评论我的答案，或者如果这是一个大变化，将其添加为你自己的答案。再次感谢你，这是一个非常优雅的解决方案，我很可能没有想到我自己。我知道HTML注释技巧，但我很感谢你提供了一个解释和一个链接，指向绕过内联/内联块元素之间空白的其他方法。我会尽快发布我自己的解决方案，如果你能告诉我哪一个是最好的，我将不胜感激。谢谢你
@charset "utf-8";

* { box-sizing: border-box; }

a { display: inline-block; text-decoration: none; }
a:hover { text-decoration: underline; }
body, html { font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; margin: 0; padding: 0; background-color: #ffffff; }
img { border: 0; }
textarea { resize: none; }

input[type="button"], input[type="submit"] { cursor: pointer; }

.dtable { display: table; }
.dtcell { display: table-cell; }
.dtcptn { display: table-caption; }
.dtrow { display: table-row; }

span.cblock { display: inline-block; padding: 18px; border: 2px solid transparent; -webkit-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

#container { width: 100%; height: 100%; }
#content { height: 100%; }
#footer { text-align: center; }
#footer span { width: 100%; }
#header > div { margin: 0 auto; }
#logo { width: 100px; background-image: url('../images/logo.gif'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }