Question

我试图将一个日历放在一个透明的div容器中，但是我遇到了一些问题，我希望每个日历盒在透明盒子中形成一个占宽度为100％的行。所以基本上目前页面看起来像这样： screenshot

您可能注意到的是，如果您使用＆＃34来查看容器，请单击图像文本＆＃34;是盒子比它下面的行宽。

这是日历的CSS代码：基本上与.transbox相关的所有内容都与透明框有关。日历日是班级.weekdayssttart和工作日。其余的课程是编号的日历日。因此，由于每周有7天我只是认为我必须将100/7除以14.2857142857并将每个盒子类型设置为该宽度的百分比。然而，这是我得到的结果：screenshot2。我明显注意到的是，行是小到包含日历盒，有没有人有想法解决这个问题？抱歉我的英语不好。

＆＃13;

.transbox {
    background: #fff;
    padding: 2%;
    width: 70%;
    margin-left: 15%;
    margin-bottom: 1%;
    position: relative;
    background-color:rgba(255,255,255,.9);
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,.9);
    overflow: auto;
}

.transbox p {
    color: darkslategray;
    margin-bottom: 2%;
    font-size:13px;
}

.transbox img {
    width:100%;
    height: 100%;
}

.weekdaysstart {
    width: 14%;
    height: 20px;
    background-color:floralwhite;
    border: 1px solid darkslategrey;
    text-align:center;
    float: left;
}

.weekdays {
    width: 14%;
    height: 20px;
    background-color:floralwhite;
    border: 1px solid darkslategrey;
    text-align:center;
    float: left;
}

.hint {
    width: 99%;
    height: 20px;
    background-color:floralwhite;
    border: 1px solid darkslategrey;
    text-align:center;
    padding-top: 5px;
   
}

.one {  
  background-color: floralwhite;
  width: 14%;
  height: 100px;
  float: left;
  border: 1px solid darkslategrey;
  color: darkslategrey;  
    
}

.nextrow {
  background-color: floralwhite;
  width: 14%;
  height: 100px;
  float: left;
  clear:left;
  border: 1px solid darkslategrey;
  color: darkslategrey;
  

}

.nextmonth { 
  background-color: floralwhite;
  width: 14%;
  height: 100px;
  float: left;
  border: 1px solid darkslategrey;
  color: darkslategrey; 
}

.lastrow {
  width: 14%;
  height: 100px;
  float: left;
  border: 1px solid darkslategrey;
  color: darkslategrey;
  background-color: floralwhite;
  margin-bottom:2%;
}

.pancakes {
    width: 14%;
    height: 100px;
    float:left;
    background: url(images/pancakes.jpeg);
    background-size: cover;
    border: 1px solid darkslategrey;
}

.meatballs {
    width: 14%;
    height: 100px;
    float:left;
    border: 1px solid darkslategrey;
    background: url(images/kotbulls.jpg);
    background-size: cover;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>Tasty recipes</title>
	<link href="reset.css" rel="stylesheet" type="text/css">
	<link href="stylesheet.css" rel="stylesheet" type="text/css">
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
	<ul>
		<li><a href="index.html">HOME</a></li>
		<li><a href="recipes.html">RECIPES</a></li>
		<li><a href="calendar.html">CALENDAR</a></li>
		<li class="tastyrecipes">Tasty Recipes</li>
	</ul>
	<h1>Calendar</h1>
	<h3>November 2017</h3>
    <div class = "transbox">
	<div class="hint">
		<p>Click on the image of a dish to go to its recipe-page.</p>
	</div>
	<div class="weekdaysstart">
		<p>Monday</p>
	</div>
	<div class="weekdays">
		<p>Tuesday</p>
	</div>
	<div class="weekdays">
		<p>Wednesday</p>
	</div>
	<div class="weekdays">
		<p>Thursday</p>
	</div>
	<div class="weekdays">
		<p>Friday</p>
	</div>
	<div class="weekdays">
		<p>Saturday</p>
	</div>
	<div class="weekdays">
		<p>Sunday</p>
	</div>
	<div class="nextrow">
		<p>30</p>
	</div>
	<div class="one">
		<p>31</p>
	</div>
	<div class="one">
		<p>1</p>
	</div>
	<div class="one">
		<p>2</p>
	</div>
	<div class="one">
		<p>3</p>
	</div>
	<div class="one">
		<p>4</p>
	</div>
	<div class="one">
		<p>5</p>
	</div>
	<div class="nextrow">
		<p>6</p>
	</div>
    <a href="meatballs.html">
	<div class="meatballs">
		<p>7</p>
	</div>
    </a>
	<div class="one">
		<p>8</p>
	</div>
	<div class="one">
		<p>9</p>
	</div>
	<div class="one">
		<p>10</p>
	</div>
	<div class="one">
		<p>11</p>
	</div>
	<div class="one">
		<p>12</p>
	</div>
	<div class="nextrow">
		<p>13</p>
	</div>
	<div class="one">
		<p>14</p>
	</div>
	<div class="one">
		<p>15</p>
	</div>
	<div class="one">
		<p>16</p>
	</div>
	<div class="one">
		<p>17</p>
	</div>
	<div class="one">
		<p>18</p>
	</div>
	<div class="one">
		<p>19</p>
	</div>
	<div class="nextrow">
		<p>20</p>
	</div>
	<div class="one">
		<p>21</p>
	</div>
	<div class="one">
		<p>22</p>
	</div>
	<div class="one">
		<p>23</p>
	</div>
	<div class="one">
		<p>24</p>
	</div>
    <a href="pancakes.html">
	<div class="pancakes">
		<p>25</p>
	</div>
    </a>
	<div class="one">
		<p>26</p>
	</div>
	<div class="nextrow">
		<p>27</p>
	</div>
	<div class="lastrow">
		<p>28</p>
	</div>
	<div class="lastrow">
		<p>29</p>
	</div>
	<div class="lastrow">
		<p>30</p>
	</div>
	<div class="nextmonth">
		<p>1</p>
	</div>
	<div class="nextmonth">
		<p>2</p>
	</div>
	<div class="nextmonth">
		<p>3</p>
	</div>
    </div>
</body>
</html>

＆＃13;

Answer 1

就像Matthew JohnSon所说，你可以使用flexbox来做到这一点。我不完全确定，但我相信calc()功能会让它适合。

.transbox {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
}

.weekdaysstart, .weekdays {
    width: calc(100% / 7);
}

修改

我将类的名称更改为html类的名称。

Answer 2

每行应使用一个clearfix容器。 https://css-tricks.com/snippets/css/clear-fix，并尝试使用flex而不是float，设置每个.row display：flex，然后设置flex-grow：1; flex-shrink：1; flex-basis：auto;到行内的元素。

将float元素放在div容器中的行中

2 个答案: