如何保持元素

请看看这个表格，我试图设计没有太多的运气。让我说，我来自一个表世界，我真的想学习这个CSS的东西。因为我已经使用了这么长时间的桌子，我想我期待着同样的结果。例如，如果我写了一行数据然后开始一个新行，最下面一行将永远不会从它所在的位置移动;也就是说，与CSS不同，行的内容保持不变。如何保持元素

现在，在这种情况下，我期待着同样的行为，但我得到的是这些盒子跳起来，每一个方式。我所要做的就是将两个输入框并排放置，另一个放在下面。发生的是最后一行跳转。为了推下一个盒子，我必须在右边的盒子上保留一个hight属性。

我包括所有的CSS，如果你在浏览器中查看它，你会希望看到这些框，因为我打算他们是。

#passage .input-right { 
    border:1px solid #888; 
    height:22px; <----------------------If you change this to something lower, the bottom box jumps up. 
    width:99%; 
    margin:0; 
    padding:0; 
}

这里是所有的代码。

<style> 
#passage { 
    width:90%; 
    height:350px; 
    border:0px solid #000; 
    color:black; 
    margin:auto; 
} 
#passage p { 
    font-size:11px; 
} 
#passage span.left { 
    float:left; 
    width:49%; 
    border:0px solid #000; 
} 
#passage span.right { 
    float:right; 
    width:49%; 
    border:0px solid #000; 
} 
#passage .select-left { 
    border:1px solid #888; 
    height:21px; 
    width:99%; 
    margin:0; 
    padding:0; 
} 
#passage .input-right { 
    border:1px solid #888; 
    height:22px; 
    width:99%; 
    margin:0; 
    padding:0; 
} 
#passage div#submit { 
    float:left; 
    width:100%; 
    border:0px solid #000; 
    margin-top:20px; 
} 
</style> 

<div id="passage"> 
    <span class="left"> 
    Book<br /> 
    <select class="select-left" name="book"> 
     <option value="">Select..</option> 
    </select> 
    </span> 

    <span class="right"> 
    Chapter<br /> 
    <input type="text" class="input-right" name="chapter-verse" /> 
    </span> 

    <span class="left"> 
    Translation<br /> 
    <select class="select-left" name="translation"> 
     <option value="">Select...</option> 
    </select> 
    </span> 

    <div id="submit"> 
    <form method="post" action=""> 
     <div> 
     <input type="submit" value="submit" name="search" /> 
     </div> 
    </form> 
    </div> 
</div>

来源

2009-11-01 Jim

您需要了解的是块和内联元素之间的区别，并且这两者都来自相当面向文本的理念。块元素（例如<div>或<p>）将彼此向下推，即它们不会出现在彼此相邻的相同“行”上，而是更像段落。内联元素，如<span>和<input>，另一方面表现得像文本。只要有空间，它们在同一条直线上排成一行，然后向下移动到下一行，然后向左移动，直到它们碰到障碍物并再次启动程序。

对内联元素应用高度与将其应用于块级元素的结果不同。它可能不会立即影响内联元素，但可能会将其推到附近的其他块级元素上。

如果您将float添加到混合中，它会变得有点棘手，因为浮动元素的行为有点像块和内联元素。块级元素将很大程度上忽略浮动元素，即块级元素内的浮动元素将不会对所述块级元素的总高度做出贡献。 OTOH，内联元素将通过浮动元素与浮动元素“交互”（这种行为是为嵌入在文本段落中的图像设计的）。浮动元素在很大程度上表现为内联元素。

-- div (block) ----------------------------------- 
| inline inline inline -- img (floated right) -- | 
| inline inline inline |      | | 
| inline inline inline |      | | 
| inline inline inline ------------------------- | 
| inline inline inline inline inline inline  | 
| inline inline inline inline inline    | 
-------------------------------------------------- 

-- div (block) ----------------------------------- 
| inline inline inline -- img (floated right) -- | 
| inline inline inline |      | | 
-----------------------|      |-- 
         ------------------------- 
      (the float is not contributing to the div's height)

有未来两个输入出现相互下面第三个最简单的方法可能是这样的：

-- div (block) --------------------------- 
| input (inline)  input (inline) | 
------------------------------------------ 
-- div (block) --------------------------- 
| input (inline)      | 
------------------------------------------

您可以代码的HTML这样的，或者操纵你现有的HTML通过CSS表现得像这样（display: block/display: inline）。欢迎来到CSS的世界。原则上这并不难，你只需要摆脱桌面思维。 :)

来源

2009-11-01 06:12:18 deceze

欺骗，谢谢你一个梦幻般的答案！过去我曾听说过内联和块状元素，并试图找到某种明确的列表，但找不到一个。我想我会接受你的建议并创建3个div，并使用跨度来处理它们内部的输入。这应该工作，我希望。 :) – Jim 2009-11-01 06:18:30

deceze，我试图做你已经建议，并给予第一行div周围的边框，但看不到盒子。如果我在那里放置一个高度属性，那么我可以看到盒子。这对我来说很奇怪，因为再次，对于表，如果行中有**任何**，您将能够看到它。这个div是不是开放到它的内容的大小？ – Jim 2009-11-01 06:29:02

@Jim：它应该，除非你只有浮动元素（如上所述，花车很大程度上被块所忽略）。我建议你先把所有的CSS都扔出去，然后清理一下。 – deceze 2009-11-01 06:34:14

我在长时间内与类似的问题交战过，特别是在主流浏览器中保持相同。最后，我转向使用YUI Grids来简化这一切。还有其他几种CSS网格解决方案可用于简化它，但我没有亲自使用过任何其他CSS。

来源

2009-11-01 05:38:50 Jason

谢谢杰森。我现在就去看看。 :) – Jim 2009-11-01 05:39:43

如何保持元素

回答

相关问题