0

我不知道我应该如何解释，但我想在项目 1 和 2 之间自动调整区域（空间）的宽度。我不确定它是 ul 还是 li ....

我还想将项目 1 垂直化到其子项的中心。我尝试了很多方法来处理 CSS，但我无法找到一个好的解决方案。请帮助和建议。

现在就像

-----                                                     -------
| P |              I want to be like this  ->             |  C  |
-----                                                     -------
     -----                                     -------    -------
     | C |                                     |  P  |    |  C  |
     -----                                     -------    -------
     -----                                                -------
     | C |                                                |  C  |
     -----                                                -------
     -----
     | C |
     -----  
                         the width of P will auto change

CSS

.div {
    border: 1px solid #666;
    overflow: hidden;
    display: table;
    height: 30px;
    width: 100px;
}
ul{
    list-style:none;    
}

HTML

<ul>
  <li>
    <div class="div">Item 1</div>
<ul>
  <li>
    <div class="div">Item 1.1</div>
</li>
<li>
  <div class="div">Item 1.2</div>
</li>
<li>
  <div class="div">Item 1.3</div>
</li>
<li>
  <div class="div">Item 1.4</div>
</li>
</ul>
</li>
<li>
  <div class="div">Item 2</div>
</li>
<li>
  <div class="div">Item 3</div>
</li>
<li>
  <div class="div">Item 4</div>
</li>
</ul>
4

2 回答 2

1

认为小提琴只是一个近似的。但是看看这个。http://jsfiddle.net/nQvEW/138/

我所做的是，我认为第一个 li 元素是类 parent 的父元素，并且我将它们相对于主页定位。

.parent {
position:relative;
}

其次，我考虑了父元素内部的 ul，并将其相对于父 li（由父 li 和子 ul 元素组成）定位，并适当地应用了 left 属性。

.parent ul{
position:relative;
left:20%;
}

第三，我将父元素内的 div 元素定位为相对于父元素是绝对的。你可以稍微调整一下，最高百分比。这实际上很重要，因为父元素需要向下移动以保持子元素的边距。对于理想情况，顶部属性值应该是 50%。

.parent .div {
position:absolute;
top:40%;
}

​</p>

于 2012-12-29T02:22:42.557 回答
1

处理这个的方法很多。在您的示例中，您并没有真正表达整体宽度，所以假设您希望 P 和 C 都在一起。

<div class="containBoth" style="width:500px;">
  <div class="c" style="float:right;width:300px;">
    <ul>
    <li>c</li>
    <li>c</li>
  </ul>
 </div>

<div class="p" style="margin-right:20px">
    P 
</div>
</div><!-- close containBoth-->

当然，我使用内联样式来提高速度。您应该像我一样分配课程并将实际的 css 放在一张表中。我只是在这里给你看。请记住，当您将某些内容向右浮动时，它需要在 html 文档中排在第一位，即 content/div/etc 以便于使用。

于 2012-12-29T00:03:05.830 回答