0

我在对齐 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>
4

3 回答 3

5

试试这个html：

        <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>

或下面的 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-22T11:07:25.223 回答
1

嘿，看看这个例子。

在此处输入图像描述

<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-22T11:06:25.757 回答
0

您的 HTML 不正确（缺少结束引号）在此行中更正：

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

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

您可以使包装器 div 表现为（包含）行：

#searchClass {
    display: table-row;
}

然后，您将需要调整边距。

就个人而言，我会删除所有边距、高度等设置，并首先看看它的外观，没有这些。

于 2013-06-22T11:12:45.100 回答