对齐问题内部div

我正在面对问题，同时对齐div内的元素。对齐问题内部div

我想是这样的

|-----------------------------------------------| 
|<P> | <input type = text> | imagebutton here | 
|here | here    |     | 
|-----------------------------------------------|

但我越来越像

|-----------------------------------------------| 
|<P> |          | 
|here |          | 
|  <input type = text> |     | 
|  here    |     | 
|        imagebutton here | 
|-----------------------------------------------|

因此，有一些问题，让下一个元素在div要显示的当前元素，即若跌破我可以将<input>与<p>水平对齐，我认为这会给出解决方案。

下面是我的尝试：

CSS部分

.imagewrapper{ 
    display: table-cell; 
    background-color:yellow; 
    margin-left: 70%; 
    width: 25%; 
    margin-bottom: 10%; 
    height: 35%; 
} 
.textwrapper{ 
    display: table-cell; 
    background-color:blue; 
    margin-left: 30%; 
    width: 40%; 
    margin-bottom: 10%; 
    height: 35%; 
} 

.msg_wrapper{ 
    display: table-cell; 
    background-color:lime; 
    margin-left:5%; 
    width: 25%; 
    margin-bottom: 10%; 
}

HTML侧

<div id="searchClass"> 
<p class="msg_wrapper"><b>Class</b></p> 
<input id="txt_class" style="background-color: Aqua; class = textwrapper > 
<input type="image" id="searchclassimg" class="imagewrapper" src="./resource/search-button.png"> 
</div>

来源

2013-06-22 Kanishka Gupta

试试这个网站：下面

 <div id="searchClass"> 
      <p class="msg_wrapper"><b>Class</b></p> 
      <input style="background-color: Aqua; width:25%; float:left; margin:0 0 0 1%; class = textwrapper" id="txt_class"> 
      <input type="image" id="searchclassimg" class="imagewrapper" src="./resource/search-button.png"> 
     </div>

OR CSS代码：

<style>  
    .imagewrapper { 
     display: table-cell; 
     background-color: yellow; 
     margin-left: 1%; 
     width: 25%; 
     margin-bottom: 10%; 
     height: 35%; 
    } 
    .textwrapper { 
     display: table-cell; 
     background-color: blue; 
     margin-left: 30%; 
     width: 40%; 
     margin-bottom: 10%; 
     height: 35%; 
     float: left; 
    } 
    .msg_wrapper { 
     display: table-cell; 
     background-color: lime; 
     margin-left: 5%; 
     width: 25%; 
     margin-bottom: 10%; 
     float: left; 
    } 
</style>

来源

2013-06-22 11:07:25 falguni

浮动杀死显示，你可以删除他们，他们变得无用:) –

嘿采取了这个例子。

enter image description here

<html> 
<head> 
    <title></title> 
    <style type="text/css">   
    #tablecellexamples div { border:1px solid black; width:130px; background-color:#eee } 
    </style> 
</head> 
<body> 
    <div id="tablecellexamples">   
    <div style="display:table-row"> 
    <div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus dignissim ipsum a dignissim. Proin mattis orci sit amet quam feugiat lobortis. 
    </div> 
    <div style="display:table-cell; vertical-align:top">Top aligned</div> 
    <div style="display:table-cell; vertical-align:middle">Center aligned</div> 
    <div style="display:table-cell; vertical-align:bottom">Bottom aligned</div> 
    </div> 
    </div> 
</body> 
</html>

来源

2013-06-22 11:06:25

你的HTML是不正确的（缺少右引号）在这一行修正：

<input id="txt_class" class="textwrapper">

您应该使用css规则添加Aqua颜色，替换Blue。

可以使包装DIV的行为作为（含）行：

#searchClass { 
    display: table-row; 
}

然后，您将要调整你的利润。

就个人而言，我会删除所有的边距，高度等设置，并看看它是如何看起来没有这些。

来源

2013-06-22 11:12:45

对齐问题内部div

回答

相关问题