为什么这些Div代码无法正确嵌入？ [英] Why are these Div tags not nesting properly?

问题描述

如果任何人可以在这里提供任何洞察，将非常感谢。我想创建输出，显示在不同日期的健身类的预订。这个想法是有三个横跨，但是需要很多行来覆盖所有的日期。为了做到这一点，我想使用CSS而不是使用表。

好，所以我有以下CSS定义：

  .ListSetContainer 
 {
 background-color：Red; 
 border：1px solid＃999999; 
 text-align：center; 
} 
 
 .ListSet 
 {
 margin：2px 2px 2px 16px; 
 float：left; 
 clear：none; 
} 
 
 .ListSet ul 
 {
 background-color：#EEEEEE; 
 border：1px solid＃999; 
 margin：2px 2px 16px 2px; 
 padding：6px 6px 0px 6px; 
} 
  

和以下HTML：

 < div style =clear：both;> 
< h4>课程日期，计数和参与者< / h4> 
< div class ='ListSetContainer'> 
< div class ='ListSet'> 
< ul> ... {Class information here ...} 
< / ul> 
< / div> 
< div class ='ListSet'> 
< ul> ... {Class information here ...} 
< / ul> 
< / div> 
< div class ='ListSet'> 
< ul> ... {Class information here ...} 
< / ul> 
< / div> 
< / div> -  End of First ListSetContainer 
 
< div class ='ListSetContainer'> 
< div class ='ListSet'> 
< ul> ... {Class information here ...} 
< / ul> 
< / div> 
< div class ='ListSet'> 
< ul> ... {Class information here ...} 
< / ul> 
< / div> 
< / div> - 第二个结束ListSetContainer 
< / div> - 周围结束Div 
  

但是不是让三个div水平排列，两个div，我得到这个：

关联图片

几个笔记。首先，请注意HTML（ListSetContainer divs包含ListSet divs）中的层次结构不会反映在输出中。其次，ListSetContainer的div只有一个像素高 - 没有背景显示！ （我使用红色背景，以确保我不会错过它）。整个封闭的div只是被压扁，内部的div是自己浮出来的。手动设置高度不工作，因为列表的内部div是可变高度（并且看起来奇怪，要引导）。如果我删除float：left;从内部的div，它们扩展为屏幕的全宽，因此我不能连续三个。

再次感谢您提供任何帮助。 >解决方案

这是因为 ListSetContainer 没有设置宽度。

您可以试试：

  .ListSetContainer {
 width：300px; 
} 
 
 .ListSet {
 clear：none; 
 float：left; 
 width：100px; 
} 
  

并根据需要设置样式。

If anyone can give any insight here it would be very much appreciated. I want to create output that shows reservations in fitness classes on various dates. The idea is to have three across and however many rows are needed to cover all of the dates. To do this, I'd like to use CSS rather than resorting to tables.

Ok, so I have the following CSS definitions:

.ListSetContainer 
{ 
  background-color:Red;
  border:1px solid #999999;
  text-align:center;
}

.ListSet
{
  margin: 2px 2px 2px 16px;
  float: left;
  clear:none;
}

.ListSet ul 
{
  background-color: #EEEEEE;
  border: 1px solid #999;
  margin: 2px 2px 16px 2px;
  padding: 6px 6px 0px 6px;
}

And the following HTML:

  <div style="clear:both;">
    <h4>Class Dates, Counts and Participants</h4>
    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of First ListSetContainer

    <div class='ListSetContainer'>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
      <div class='ListSet'>
        <ul>...{Class information here...}
        </ul>
      </div>
    </div>  -- End of Second ListSetContainer
  </div>  -- End of surrounding Div

But rather than getting three divs arranged horizontally, followed by a second row with two divs, I'm getting this:

Linked Image

A few notes. First, notice that the hierarchy in the HTML (ListSetContainer divs contain the ListSet divs) is not reflected in the output. Second, the ListSetContainer div is only one pixel high - there is no background shown! (I'm using a Red background just to be sure I don't miss it). The whole enclosing div is just squashed down and the inner divs are floating out on their own. Setting the height manually doesn't work because the inner div with the list is variable height (and it looks odd, to boot). If I remove the float:left; from the inner divs, they expand to be the full width of the screen and thus I cannot get three in a row. So...I'm at a loss.

Again, thanks for any help you can offer!

解决方案

It's because the ListSetContainer doesn't have a set width. i expect that they'd all fit on one row on a widescreen monitor.

You could try:

.ListSetContainer {
    width: 300px;
}

.ListSet {
    clear: none;
    float: left;
    width: 100px;
}

And style as appropriate.

这篇关于为什么这些Div代码无法正确嵌入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！