1

Question

我正在设计布局，我遇到两个困难：

1）不明白为什么日历所在的div（绿色）的高度与其父级不同。

2）我在div里面放了一个ul，想要设置背景颜色'＃d1d2e0'（全宽）。这只是'链接四'。

div.container
{
width:100%;
margin:0px;
background: #005884;
}

div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
color: #d1d2e0;
background: green;
}

h3.header
{
padding:0;
margin:0;
}

div.right
{
margin-left:190px;
padding:1em;
text-align: right;
}

label.year{
	padding: 0.4em 0.6em;
    margin: 0;
	background: #d1d2e0;
	color: #36384e;
    border-bottom: 1px solid #d1d2e0;
}

select#DropYear{
	background: #36384e;
	color: #d1d2e0;
	width: 70px;
	height: 30px;
	margin: 0;
	font-size: 16px;
	text-align: center;
	text-align-last: center;
}

div.nav{
    width: 100%;
    height: 30px;
	color: 5px soldi red;
    display: table-cell;
    vertical-align: middle;
}

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: #005884;
    background-color: #d1d2e0;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}

a.last { border-right: none; }

li.nav {
	display: inline;
    text-align: center;
}

.form{
	width: auto;
    height: 60px;
	background: lightgrey;
}

select.form{
}

.content{
	margin: 5px 0px;
	width: auto;
    height: 150px;
	background: yellow;
}

.footer{
	width: auto;
    height: 20px;
	background: grey;
}

<div class="container">
  <div class="left"><h3 class="header">Calendar</h3></div>
  <div class="right">
    <label class="year" for="DropYear">Year</label><!--
    --><select id="DropYear" class="drop">
      <option value="2016">2016</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
    </select>  
  </div>
</div>
<div class="nav">
  <ul>
    <li class="nav"><a href="#">Link one</a></li>
    <li class="nav"><a href="#">Link two</a></li>
    <li class="nav"><a href="#">Link three</a></li>
    <li class="nav"><a href="#" class="last">Link four</a></li>
  </ul>
</div>
<div class="form"></div>
<div class="content"></div>
<div class="footer"></div>

此致埃利奥·费尔南德斯

Answer 1

将您的<?php function endFormat($dateTime, $format) { $d = DateTimeImmutable::createFromMutable($dateTime); if ($d == $d->setTime(0, 0)) { $yesterday = $d->sub(new DateInterval('P1D')); $format24 = str_replace('H', '24', $format); return $yesterday->format($format24); } else { return $d->format($format); } } $start = new DateTime('2017-01-01T22:00:00'); $end = new DateTime('2017-01-02T00:00:00'); $format = 'Y-m-d H:i'; $startString = $start->format($format); $endString = endFormat($end, $format); printf("From %s to %s.\n", $startString, $endString); From 2017-01-01 22:00 to 2017-01-01 24:00.更改为div.right，您的问题将得到解决。有padding:1rem填充扩展它因此它比左部分大。或者您可以使用padding: 12px，因此您可以获得所有方面的1rem，但仅在底部获得12px

Answer 2

1

您应该使用border-box来更轻松地调整大小：

* {
    box-sizing: border-box;
}

然后给你的.container一个高度并告诉它的孩子继承它。

2

接下来，摆脱display: table-cell;上的div.nav并实际给它一个背景色。我根本没有看到你试图设置它的位置。

background: #d1d2e0;

此外，这个属性没有意义：

color: 5px solid red;

应该是border: 5px solid red;或color: red;。

* {
    box-sizing: border-box;
}

div.container
{
width:100%;
margin:0px;
background: #005884;
height: 62px;
}

div.left
{
float:left;
width:160px;
margin:0;
/*padding:1em; don't need this */
color: #d1d2e0;
background: green;
height: 100%;
}

h3.header
{
padding: 0 0 0 1em;
margin:0;
line-height: 62px;
height: 62px;
}

div.right
{
margin-left:190px;
padding:1em;
text-align: right;
}

label.year{
	padding: 0.4em 0.6em;
    margin: 0;
	background: #d1d2e0;
	color: #36384e;
    border-bottom: 1px solid #d1d2e0;
}

select#DropYear{
	background: #36384e;
	color: #d1d2e0;
	width: 70px;
	height: 30px;
	margin: 0;
	font-size: 16px;
	text-align: center;
	text-align-last: center;
}

div.nav{
    width: 100%;
    height: 30px;
	/*color: 5px solid red; was this supposed to be "border" ? */
    /*display: table-cell; don't need this */
    vertical-align: middle;
    background: #d1d2e0; /* you weren't setting this */
}

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

a {
    float: left;
    width: 6em;
    text-decoration: none;
    color: #005884;
    background-color: #d1d2e0;
    padding: 0.2em 0.6em;
    border-right: 1px solid white;
}

a.last { border-right: none; }

li.nav {
	display: inline;
    text-align: center;
}

.form{
	width: auto;
    height: 60px;
	background: lightgrey;
}

select.form{
}

.content{
	margin: 5px 0px;
	width: auto;
    height: 150px;
	background: yellow;
}

.footer{
	width: auto;
    height: 20px;
	background: grey;
}

<div class="container">
  <div class="left"><h3 class="header">Calendar</h3></div>
  <div class="right">
    <label class="year" for="DropYear">Year</label><!--
    --><select id="DropYear" class="drop">
      <option value="2016">2016</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
    </select>  
  </div>
</div>
<div class="nav">
  <ul>
    <li class="nav"><a href="#">Link one</a></li>
    <li class="nav"><a href="#">Link two</a></li>
    <li class="nav"><a href="#">Link three</a></li>
    <li class="nav"><a href="#" class="last">Link four</a></li>
  </ul>
</div>
<div class="form"></div>
<div class="content"></div>
<div class="footer"></div>

Answer 3

您可以将正确的容器移动到左侧容器中，然后只需更改一些填充（例如，将填充添加到h3并从.left中删除）。在这种情况下，较小的容器（.left）将生长到其所有内容以适应。

<div class="container">
  <div class="left"><h3 class="header">Calendar</h3>
  <div class="right">
    <label class="year" for="DropYear">Year</label><!--
    --><select id="DropYear" class="drop">
      <option value="2016">2016</option>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
    </select>  
  </div>
  </div>
</div>

至于你的链接，将它们全部浮动并将它们的宽度设置为25％。您还需要丢失显示：来自包含div的表格单元格

CSS对齐和大小

3 个答案:

1

2