为什么我不能静态对齐两个div？ [英] Why can't I statically align two divs?

问题描述

好的，所以这有点令人困惑所以请耐心等待。我正在尝试创建一个带有侧栏和一些主要内容的页面，以及顶部的标题栏。标题栏已经到位且有效，所以我不太关心它。但是虽然我已经让面板和内容最终水平堆叠，但每当页面调整大小或放大时，内容都会被推到面板下方，尽管它们都在容器中，至少应该剪切内容（内容）运行其容器的背景颜色）。无论如何，这是我的CSS及其实现：

＃ links  { width  ：  420px;  < span class =code-attribute> background  ： ＃2583FE;   float  ：  left;   border  ：  1px solid＃0961D3;   border-left  ：  0px solid black;   height  ：  100％; }  / *  这是面板* /  
＃ cont  {背景 ： ＃ F2F5A9;   width  ：  100％;   float  ：  left;  < span class =code-attribute> height  ：  100％; }  / *  这是内容* /  
＃ main  {溢出 ：  auto;   margin-left  ：  400px;   float  ：  left;   width  ：  900px;   padding-left  ：  10px;   margin  ：  0 auto; }  / *  这是父容器* /  

 <   div     id   =  cont >  
 
 <   div     id   = <跨度class =code-keyword> links >  
 <！ -    我所有的面板内容   - >   
 <   / div  > ;  
 
 <   div     id   =  main  >  
 <！ -    包含一些值的表   - >   
 < span class =code-keyword><   table     WID th   =  100％ >  
 <   tr  > ;  
 <   td   > 第1项<   / td   >  
 <   td  > 第2项<   / td  >  
 <   td  > 项目3 <   / td  > ;  
 <   / tr  >  
 <   / table  >  
 <   / div  >  
 <   / div  >  

有谁知道我做错了什么？我希望表（以及其余内容）保持静止，而不是重新定位自己并默认为垂直div堆栈。我不确定是什么导致了它。希望这一切都有意义。任何帮助表示赞赏。在此先感谢。



有一个问题的图像：这里

解决方案

如果在px中使用Width和Height，它将不会换行-contents of div。



这里有一些帮助链接。试试这些。



Content-Wrap



Content-Wrap-Example


不要擦拭内容div



div中的自动换行文字

我们可以并排安排两个div ....

left

对

希望它会有所帮助ü...

Okay, so this is slightly confusing so bear with me. I'm trying to create a page with a side bar and some main content, as well as a title bar up at the top. The title bar is in place and works, so I'm not too concern about it. But although I've gotten the panel and content to finally stack horizontally, whenever the page resizes or I zoom in, the content gets pushed to below the panel, despite them both being in a container that should at least clip the content (the content runs over the background color of its container). Anyway, here is my CSS and the implementation of it:

#links		{ width:420px; background:#2583FE; float:left; border:1px solid #0961D3; border-left:0px solid black; height:100%;} /*This is the panel*/
#cont       { background:#F2F5A9; width:100%; float:left;  height:100%;} /*This is the content*/
#main       { overflow:auto; margin-left:400px; float:left; width:900px; padding-left:10px; margin:0 auto; }/*This is the parent container*/

<div id="cont">

	<div id="links">
		<!--All my panel stuff-->
	</div>
		
	<div id="main">
		<!--A table with some values-->
		<table width="100%">
			<tr>
				<td>Item 1</td>
				<td>Item 2</td>
				<td>Item 3</td>
			</tr>
		</table>
	</div>
</div>

Does anyone know what I'm doing wrong? I would like the table (and the rest of the content) to stay stationary instead of repositioning itself and defaulting to a vertical div stack. I'm not sure what's causing it. Hopefully this all makes sense. Any help is appreciated. Thanks in advance.

There's an image of the problem: Here

解决方案

If you use Width and Height in px it'll not wrap-contents of div.

here is some helping links. try these.

Content-Wrap

Content-Wrap-Example

Don't wrape content of div

Word wrap text in div

we can arrange two divs side by side....

left

right

hope it will help u...

这篇关于为什么我不能静态对齐两个div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！