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>

または以下の CS コード:

<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-rules を使用して Aqua の色を追加し、Blue を置き換えます。

ラッパー div を (含む) 行として動作させることができます。

#searchClass {
    display: table-row;
}

次に、余白を調整する必要があります。

個人的には、余白、高さなどの設定をすべて削除し、これらを使用せずに最初にどのように見えるかを確認します。

于 2013-06-22T11:12:45.100 に答える