Css 如何使垂直边框随内容增长_Css

Css 如何使垂直边框随内容增长

css

Css 如何使垂直边框随内容增长,css,Css,如何使两个垂直边框在不考虑任何列中的内容高度的情况下均匀增长 <body style="margin:0;padding:0;"> <div style="min-height:500px;width:100%;margin:auto;border-top:2px solid #333;border-bottom:2px solid #333;"> <div style="min-height:496px;float:left;width:23%;bor

如何使两个垂直边框在不考虑任何列中的内容高度的情况下均匀增长

<body style="margin:0;padding:0;">
  <div style="min-height:500px;width:100%;margin:auto;border-top:2px solid #333;border-bottom:2px solid #333;">
    <div style="min-height:496px;float:left;width:23%;border-right:2px solid #333;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
    <div style="min-height:496px;float:left;width:33%;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
    <div style="min-height:496px;float:left;width:33%;border-left:2px solid #333;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
  </div>
</body>

您需要清除浮动列，在我的例子中，我使用了一个添加的元素，但有方法可以做到这一点，并且还有高度：每列100%

另一方面，您应该真正使用外部样式表和类，管理内联代码是非常困难的，因为单独设置每个元素的样式是非常困难的

高度：100%用于列我刚刚尝试过，但它没有重复感谢Zach。我能看出它是有效的，谢谢。我计划一旦我按照我想要的方式将所有css都放到一个样式表中。@NaN这对我来说似乎是违反直觉的，而且速度很慢，但无论什么东西能让你的船漂浮，至少在有人告诉你怎么做之前：你是对的，我同意把所有事情都进行内联处理是违反直觉的，但是客户不断地改变主意，这似乎是一种更快的方法，让我同时管理所有事情。扎克，你还在吗？我有点困惑，因为我复制了你在jsbin上所做的，它看起来和我以前做的完全一样。然而，当它在jsbin中运行时，我可以看到它看起来非常完美。“这是为什么？”楠说