Question

天儿真好。

我正在开发一个快速响应的网站。这就是我试图使标题部分分别在桌面和移动设备上看起来像： 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>

这是我的CSS：

@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; }

Answer 1

以下是一个简单的示例，展示了如何在display: table-cell和display: block;之间切换

注意标记中的注释，摆脱内联块元素空格（这里有更多方法：how-to-remove-the-space-between-inline-block-elements）

Fiddle demo

Stack snippet

.dtable {  display: table;  width: 100%; }
.dtcell {  display: table-cell;  padding: 10px; }
.dtcptn {  display: table-caption; }
.dtrow  {  display: table-row; }
.dtcell:first-child {
  width: 1px;
}
.dtcell:first-child span {
  display: inline-block;
  border: 1px solid;
  box-sizing: border-box;
}
.dtcell:first-child span:last-child {
  display: none;
}
.dtcell:last-child div {
  border: 1px solid;
  box-sizing: border-box;
}
.dtcell:last-child span {
  display: inline-block;
  width: 50%;
  border: 1px solid;
  box-sizing: border-box;
}
  
@media screen and (max-width: 600px) {
  .dtcell:first-child {
    width: 100%;
  }
  .dtcell:first-child span:last-child {
    display: inline-block;
  }
  .dtcell,
  .dtcell:last-child span {
    display: block;
    width: auto;
  }
  .dtcell:last-child div {
    display: none;
  }
}

<div id="container" class="dtable">
  <div id="header" class="dtrow">
    <div class="dtcell" id="logo">
      <span>logo</span>
      <span>hamburgermenu</span>
    </div>
    <div class="dtcell">
      <div>links</div>      
      <span>phone</span><!-- 
      --><span>social</span>
    </div>    
  </div>
</div>

Answer 2

嗯，这是我使用定位和伪元素的答案。

@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; }
.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%; }
#contact, #social { width: 50%; }
#content { height: 100%; }
#footer { text-align: center; }
#footer span { width: 100%; }
#header { position: relative; text-align: center; }
#header > div { margin: 0 auto; }
#header > div div { display: inline-block; }
#header > div div:last-child { margin-left: 100px; }
#logo { width: 100px; position: absolute; top: 0; bottom: 0; background-image: url('logo.png'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
#menu { width: 100%; }
#menu::after { content: '\000A'; white-space: pre; }
#social { text-align: right; }

@media screen and (max-width: 768px) {

#contact, #social { width: 100%; }

/*  added these 2 rules  */
#social { text-align: center; }
#header > div div:last-child { margin-left: 0; }

}

<!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>
				<div id="logo">&nbsp;</div><!--
				--><div>
					<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><!--
					--><span class="cblock" id="contact">Phone</span><!--
					--><span class="cblock" id="social">Social</span>
				</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>

它不如LGSon那么好，因为在较小的屏幕尺寸上它会在屏幕的左侧和id="contact"以及id="social"之间留下一个边距，我不知道如何修复。但是，它在某些情况下可能很有用。

创建基于内容大小扩展的响应式网格，而不使用flexbox，CSS网格，计算或javascript，符合IE9 +

2 个答案: