CSS用表格元素排列<div> s

时间：2017-10-11 00:15:03

标签： html css css3

我一直在尝试将这些<div>合并到我的网站上水平排列。我已经制作了一个模板，可以在codepen上正确排列<div>，但不幸的是，当我将价目卡代码粘贴到模板中时，它无法正常工作，任何澄清和帮助都是非常适用的。 

.outer-container {
  margin: auto;
  width: 100%;
  float: left;
}

.container {
  width: 200px;
  height: auto;
  box-shadow: 0 5px 10px 0px #3c385c;
}

.container2,
.container3 {
  margin-left: 201px;
  float: left;
}

<div class="outer-container">

  <div class="container container1">
    <div class="w-table">
      <div class="w-table-cell">
        <div class="w-container">
          <div class="w-card color-green">
            <div class="card-header">
              <div class="w-title" style="cursor:default">
                <h2>
                  <font size="7px">Novice</font>
                </h2>
              </div>
              <div class="w-price" style="cursor:default">
                $4.99
                <h3>/ Week</h3>
              </div>
              <div class="container-button">
                <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
              </div>
            </div>
            <div class="card-content" style="cursor:default">
              <div class="w-item" style="cursor:default">
                <span>Weekly </span>Meal Plans
              </div>
              <div class="w-item" style="cursor:default">
                <span>Personal </span>Dietary Assessment and Advice
              </div>
              <div class="w-item" style="cursor:default">
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
              </div>
            </div>
          </div>
        </div>

        <div class="container container2">
          <div class="w-table">
            <div class="w-table-cell">
              <div class="w-container">
                <div class="w-card color-green">
                  <div class="card-header">
                    <div class="w-title" style="cursor:default">
                      <h2>
                        <font size="7px">Novice</font>
                      </h2>
                    </div>
                    <div class="w-price" style="cursor:default">
                      $4.99
                      <h3>/ Week</h3>
                    </div>
                    <div class="container-button">
                      <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                    </div>
                  </div>
                  <div class="card-content" style="cursor:default">
                    <div class="w-item" style="cursor:default">
                      <span>Weekly </span>Meal Plans
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Personal </span>Dietary Assessment and Advice
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                    </div>
                  </div>
                </div>
              </div>

              <div class="container container3">
                <div class="w-table">
                  <div class="w-table-cell">
                    <div class="w-container">
                      <div class="w-card color-green">
                        <div class="card-header">
                          <div class="w-title" style="cursor:default">
                            <h2>
                              <font size="7px">Novice</font>
                            </h2>
                          </div>
                          <div class="w-price" style="cursor:default">
                            $4.99
                            <h3>/ Week</h3>
                          </div>
                          <div class="container-button">
                            <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                          </div>
                        </div>
                        <div class="card-content" style="cursor:default">
                          <div class="w-item" style="cursor:default">
                            <span>Weekly </span>Meal Plans
                          </div>
                          <div class="w-item" style="cursor:default">
                            <span>Personal </span>Dietary Assessment and Advice
                          </div>
                          <div class="w-item" style="cursor:default">
                            <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

CodePen

3 个答案:

答案 0 :(得分：0)

我简化了代码并删除了大部分嵌套，以表明您可以使用display: flex;非常简单地执行此操作。在父outer-container上使用flex会将其所有子项<div class="container">设置为灵活接收flex-direction: row作为默认值的儿童。

<div class="outer-container">
  <div class="container">
    <h2>Novice</h2>
    <span class="price">$4.99</span>
    <h3>/ Week</h3>
    <a class="w-button" href="/meal-planner" target="_blank">Sign up   </a>
    <span>Weekly Meal Plans</span>
    <span>Personal Dietary Assessment and Advice</span>
    <span>Full Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a></span>
  </div>
  <div class="container">
    <h2>Novice</h2>
    <span class="price">$4.99</span>
    <h3>/ Week</h3>
    <a class="w-button" href="/meal-planner" target="_blank">Sign up   </a>
    <span>Weekly Meal Plans</span>
    <span>Personal Dietary Assessment and Advice</span>
    <span>Full Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a></span>
  </div>
  <div class="container">
    <h2>Novice</h2>
    <span class="price">$4.99</span>
    <h3>/ Week</h3>
    <a class="w-button" href="/meal-planner" target="_blank">Sign up   </a>
    <span>Weekly Meal Plans</span>
    <span>Personal Dietary Assessment and Advice</span>
    <span>Full Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a></span>
  </div>
</div>


.outer-container {
  display: flex;
  padding: 20px;
}

.container {
  width: 200px;
  box-shadow: 0 5px 10px 0px #3c385c;
  padding: 10px;
}

.container:not(:last-of-type) {
  margin-right: 10px;
}

.container span {display:block;}

示例笔：https://codepen.io/andrewchar/pen/verOaq?editors=1100

答案 1 :(得分：0)

您在每个容器部分都遗漏了一些结束div，而且我还在容器1中添加了float: left，并将它们排成一行。

Codepen

CSS 

.outer-container {
    margin: auto;
    width: 100%;
    float:left;
}
.container {
    width: 200px;
    height: auto;
    box-shadow: 0 5px 10px 0px #3c385c;
}
.container1 {
    float: left;
}
.container2, .container3 {
    margin-left: 201px;
    float: left;
}

HTML 

<div class="outer-container">

      <div class="container container1">
            <div class="w-table">
            <div class="w-table-cell">
              <div class="w-container">
                <div class="w-card color-green">

                            <div class="card-header">
                    <div class="w-title" style="cursor:default">
                      <h2><font size="7px">Novice</font></h2>
                    </div>
                    <div class="w-price" style="cursor:default">
                      $4.99
                      <h3>/ Week</h3>
                    </div>
                    <div class="container-button">
                      <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                    </div>
                  </div>

                  <div class="card-content" style="cursor:default">
                    <div class="w-item" style="cursor:default">
                      <span>Weekly </span>Meal Plans
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Personal </span>Dietary Assessment and Advice
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                    </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
      </div>

        <div class="container container2">
            <div class="w-table">
            <div class="w-table-cell">
              <div class="w-container">
                <div class="w-card color-green">

                  <div class="card-header">
                    <div class="w-title" style="cursor:default">
                      <h2><font size="7px">Novice</font></h2>
                    </div>
                    <div class="w-price" style="cursor:default">
                      $4.99
                      <h3>/ Week</h3>
                    </div>
                    <div class="container-button">
                      <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                    </div>
                  </div>

                  <div class="card-content" style="cursor:default">
                    <div class="w-item" style="cursor:default">
                      <span>Weekly </span>Meal Plans
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Personal </span>Dietary Assessment and Advice
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                    </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container container3">
            <div class="w-table">
                <div class="w-table-cell">
              <div class="w-container">
                <div class="w-card color-green">

                  <div class="card-header">
                    <div class="w-title" style="cursor:default">
                      <h2><font size="7px">Novice</font></h2>
                    </div>
                    <div class="w-price" style="cursor:default">
                      $4.99
                      <h3>/ Week</h3>
                    </div>
                    <div class="container-button">
                      <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
                    </div>
                  </div>

                  <div class="card-content" style="cursor:default">
                    <div class="w-item" style="cursor:default">
                      <span>Weekly </span>Meal Plans
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Personal </span>Dietary Assessment and Advice
                    </div>
                    <div class="w-item" style="cursor:default">
                      <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
                    </div>
                  </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

答案 2 :(得分：0)

<div class="outer-container">
  <div class="container container1">
    <div class="w-table">
      <div class="w-table-cell">
        <div class="w-container">
          <div class="w-card color-green">
            <div class="card-header">
              <div class="w-title" style="cursor:default">
                <h2><font size="7px">Novice</font></h2>
              </div>
              <div class="w-price" style="cursor:default">
                $4.99
                <h3>/ Week</h3>
              </div>
              <div class="container-button">
                <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
              </div>
            </div>
            <div class="card-content" style="cursor:default">
              <div class="w-item" style="cursor:default">
                <span>Weekly </span>Meal Plans
              </div>
              <div class="w-item" style="cursor:default">
                <span>Personal </span>Dietary Assessment and Advice
              </div>
              <div class="w-item" style="cursor:default">
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container container2">
    <div class="w-table">
      <div class="w-table-cell">
        <div class="w-container">
          <div class="w-card color-green">
            <div class="card-header">
              <div class="w-title" style="cursor:default">
                <h2><font size="7px">Novice</font></h2>
              </div>
              <div class="w-price" style="cursor:default">
                $4.99
                <h3>/ Week</h3>
              </div>
              <div class="container-button">
                <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
              </div>
            </div>
            <div class="card-content" style="cursor:default">
              <div class="w-item" style="cursor:default">
                <span>Weekly </span>Meal Plans
              </div>
              <div class="w-item" style="cursor:default">
                <span>Personal </span>Dietary Assessment and Advice
              </div>
              <div class="w-item" style="cursor:default">
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container container3">
    <div class="w-table">
      <div class="w-table-cell">
        <div class="w-container">
          <div class="w-card color-green">
            <div class="card-header">
              <div class="w-title" style="cursor:default">
                <h2><font size="7px">Novice</font></h2>
              </div>
              <div class="w-price" style="cursor:default">
                $4.99
                <h3>/ Week</h3>
              </div>
              <div class="container-button">
                <a class="w-button" href="/meal-planner" target="_blank">Sign up </a>
              </div>
            </div>
            <div class="card-content" style="cursor:default">
              <div class="w-item" style="cursor:default">
                <span>Weekly </span>Meal Plans
              </div>
              <div class="w-item" style="cursor:default">
                <span>Personal </span>Dietary Assessment and Advice
              </div>
              <div class="w-item" style="cursor:default">
                <span>Full </span>Access to the <a href="/mydietgoal-dietary-catalogue">Food Catalogue</a>
              </div>
            </div>
          </div>
        </div>
      </div>

我认为这就是你想要的。你忘了关闭几个div标签。

在此处查看笔：https://codepen.io/roshankrishnan7/pen/pWKJZP

相关问题
最新问题