проблема с выравниванием внутри 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

попробовать этот 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-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">

вы должны добавить цвет Aqua, используя свои правила css, заменив синий.

Вы можете сделать обертку Див ведут себя как (содержащие) ряд:

#searchClass { 
    display: table-row; 
}

Затем вы хотите настроить свои поля.

Лично я бы удалил все поля, высоту и т. Д., Настройки и посмотрел, как это выглядит первым, без них.

источник

2013-06-22 11:12:45

проблема с выравниванием внутри div

ответ

Смежные вопросы