无法水平显示div内的div？ （HTML，CSS）

时间：2017-11-28 16:18:07

标签： html css

我不知道我做错了什么，我不能在div中得到3个div来连续显示水平。他们似乎只是像一个列一样堆叠在一起，我想要一排。

我想在“％”中使用宽度值，因为我希望它是动态的而不是固定的。

我觉得错误可能是我没有为页面定义100％的满刻度，所以33,33％不能相对。

* {
  box-sizing: border-box;
}

div {
  * background-color: gray;
  border: 1px solid black;
}

div.header {
  padding: 20px;
  text-align: center;
}

div.column {
  float: left;
  width: 33, 33%;
  padding: 15px;
}

div.row:after {
  display: table;
  clear: both;
  content: "";
}

div.footer {
  text-align: center;
}
<div class="header">
  <h2>Rubrik</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
    quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
  </p>
</div>
<div class="row">
  <div class="column">
    <h2>Column</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
      quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>
  <div class="column">
    <h2>Column</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
      quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>
  <div class="column">
    <h2>Column</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
      quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>
</div>
<div class="footer">
  <h2>Footer</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
    quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
  </p>
</div>

提前致谢！

4 个答案:

答案 0 :(得分：1)

library(dplyr)

mydataWithWeeksAndWeights <- data_frame(ended = c("14/11/2016",
                                                  "14/11/2016",
                                                  "14/11/2016",
                                                  "02/01/2017",
                                                  "02/01/2017",
                                                  "15/11/2017",
                                                  "15/11/2017",
                                                  "16/11/2017",
                                                  "16/11/2017"),
                                        week = c(46, 46, 46, 1, 1, 46, 46, 46, 46),
                                        satisfactionLevel = c("Very dissatisfied",
                                                              "Very satisfied",
                                                              "Satisfied",
                                                              "Dissatisfied",
                                                              "Very dissatisfied",
                                                              "Very satisfied",
                                                              "Very dissatisfied",
                                                              "Very Satisfied",
                                                              "Very satisfied"),
                                        weight = c(0, 1, 0.75, 0.25, 0, 1, 0, 1, 1))

mydataWithWeeksAndWeights$year <- format(as.Date(mydataWithWeeksAndWeights$ended,
                                                 "%d/%m/%Y"), "%Y")

pivotTable <- mydataWithWeeksAndWeights %>%
  group_by(week, year, weight) %>%
  count(satisfactionLevel)

使用。而不是，

答案 1 :(得分：0)

问题在于：

div.column {
    float: left;
    width: 33,33%; // Using a coma instead of a dot. Must be 33.33%
    padding: 15px;

}

答案 2 :(得分：0)

div.column {
    float: left;
    width: 33.33%; 
    padding: 15px;
}

div.row {
  width:100%;
}

答案 3 :(得分：0)

现在常见的方法是在容器元素上使用display: flex;。

* {
  box-sizing: border-box;
}

div {
  * background-color: gray;
  border: 1px solid black;
}

div.header {
  padding: 20px;
  text-align: center;
}

.row {
  display: flex;
}

div.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

div.footer {
  text-align: center;
}
<!DOCTYPE html>
<html lang="sv">

<head>
  <title></title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="layout1.css">
</head>

<body>
  <div class="header">
    <h2>Rubrik</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
      quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>
  <div class="row">
    <div class="column">
      <h2>Column</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
        quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
      </p>
    </div>
    <div class="column">
      <h2>Column</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
        quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
      </p>
    </div>
    <div class="column">
      <h2>Column</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
        quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
      </p>
    </div>
  </div>
  <div class="footer">
    <h2>Footer</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus
      quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
    </p>
  </div>
  <!-- <a href="index.html">Startsida</a> -->
</body>

</html>

相关问题
最新问题