Css Align ДИВ одна линия

Question

Я пытаюсь выровнять this code , чтобы получить что-то вроде

как писать правильный синтаксис, чтобы сделать правильный мир кода с указанием на рисунке, совместите выглядеть как на картинке?

Answer 1

Вот updated Fiddle, который получает вас немного ближе к тому, что вам нужно. Так что же я сделал?

• Во-первых, ваш HTML нуждается в большой очистке. Я сделал небольшую сумму, но я бы предположил, что вы проводите некоторое время, проходя через него, правильно отступая и разбивая его на логические разделы.

• Для правой стороны я разбил каждый ряд на свой собственный div, чтобы логически разделить их. Это упрощает стиль.

• Элементы управления в каждой строке имеют фиксированную ширину пикселей, чтобы помочь с выравниванием. Немного взлома, но в этом случае он работает.

@starikovs предлагает использовать Flexbox, что вы должны исследовать дальше. Я также предлагаю вам потратить некоторое время на изучение того, как правильно структурировать ваш HTML-код. Скрипка, с которой я здесь связан, - это только быстрая очистка!

Редактировать
В интересах держать все в одном месте, я скопировал код здесь:

HTML

<form id=fbid26588961 name=fbid26588961> 
    <div class="full-info_auction-operations"> 
     <div class="full-info_auction-buy"> 
      <div class="auction-value"> 
       BuyNow 
       <span>5394&nbsp;&euro;</span> 
      </div> 
      <input disabled id=buynow1 onclick="newcmd('cmd.asp?op=buynow&carid=26588961');" type=button value="BuyNow"> 
     </div> 


     <div class="full-info_auction-raise"> 
      <div class="auction-value"> 
       Current Price 
       <span>900&nbsp;&euro;</span> 
      </div> 
      <input type=button style="font-size:10px;" value="+100" onclick="pliusZZ(100);"> 
      <input type=button style="font-size:10px;" value="+200" onclick="pliusZZ(200);"> 
      <input type=button style="font-size:10px;" value="+500" onclick="pliusZZ(500);"> 
     </div> 
     <div class="full-info_auction-confirm"> 
      <div class="auction-value"> 
       Your Bid 

       <div class="ctrl_row"> 
        <input placeholder="1000&nbsp;&euro;" class="robot i12" id=sumbid26588961> 
        <input type=checkbox onclick="fbid26588961.pbtn.disabled=!this.checked;" > 
        <input disabled name=pbtn onclick="placebid26588961();" type=button class="confirm-button" value="Confirm" /> 
       </div> 

       <label class="confirm-raise"> 
        <input placeholder="for bot" class="robot confirm-modify i12" /> 
        <input class="checkbox-controller" type="checkbox" name="country" onclick="fbid26588961.rbtn.disabled=!this.checked;if(!this.checked){disablerobot26588961();}" /> 
        <input onclick="enablerobot26588961();" name=rbtn type=button disabled value="Enable robot"> 
        <div class="checkbox"></div><span><div style="color:red">Robot disabled</div></span> 
       </label> 

      </div> 
     </div> 
    </div> 
    <div class="clear"></div> 
</form> 

CSS

/* ORIGINAL CSS */ 
input[type="button"] {background: #5267ff; border-radius: 3px; border: none; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 11px; padding: 10px 14px; text-transform: uppercase;color:inherit;} 
input[type="button"]:hover {background: #4758d2;} 
.full-info_auction-operations {margin: 0 40px 0 85px; padding-top: 17px;} 
.full-info_auction-operations input[type="button"] {display: inline-block; /*vertical-align: bottom;*/} 
.full-info_auction-buy {max-width: 235px; display: inline-block; margin-right: 5px; padding: 5px 0 10px;} 
.full-info_auction-operations.auction-value {font-family: 'Open Sans', sans-serif; font-size: 12px; color: #b1b1b1; display: inline-block; vertical-align: middle; text-align: left; line-height: 20px;margin: 0px 7px 0 0;} 
.full-info_auction-operations.auction-value span {font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 16px; color: #000; display: block;} 
.full-info_auction-raise {max-width: 265px; display: inline-block; border-left: 1px solid #e7e7e8; border-right: 1px solid #e7e7e8; padding: 5px 10px 10px;} 
//.full-info_auction-raise input[type="button"] {padding: 10px 11px 10px 10px; background: #000;} 
.full-info_auction-confirm {max-width: 215px; display: inline-block; margin-left: 5px; padding: 5px 0 10px;} 
.full-info_auction-confirm .auction-value {margin-right: 7px;} 
.full-info_auction-operations > div { 
    vertical-align: top; 
} 

/* NEW CSS BELOW */ 

.auction-value { float: left; font-size: 80%; color: #888; margin-right: 5px; } 
.auction-value span { display: block; color: #000; } 
.full-info_auction-buy input[type='button'] { color: #fff; } 

.full-info_auction-raise input[type='button'] { background: #000; color: #fff; } 

.robot { width: 50px; } 
.ctrl_row { margin-bottom: 5px; } 
.ctrl_row input[type='button'], 
.confirm-raise input[type='button'] { width: 120px; } 
.confirm-modify { color: #fff; } 

Answer 2

Вам нужно только добавить vertical-align: top;, чем он должен работать.

Answer 3

Там вы идете:

.full-info_auction-operations > div { 
    vertical-align: top; 
} 

Это должно сделать работу. @Mario Kurzweil ответ был хорошим, не знаю, почему он занижен.

Answer 4

Новый способ сделать это - использовать flexbox. Вот example:

HTML:

<div class="wrapper"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

CSS:

.wrapper { 
    display: flex; 
} 

Это все стили вам нужно.

1. Кстати, вы можете использовать Autoprefixer, чтобы получить правильные префиксы браузеров.

2. Flexbox поддерживается всеми основными браузерами: http://caniuse.com/#search=flexbox

Answer 5

По-моему это Fiddle подходит к вашему желаемому расположению очень близко. Мой добавленный CSS помещается в конец (начало отмечено /* */).

CSS Я добавил

.auction-value { 
    display: inline-block; 
    vertical-align: top; 
    color: #CCC; 
    padding: 0 5px; 
} 
.auction-value > span { 
    display: block; 
    font-weight: bold; 
    color: #000; 
} 
.full-info_auction-confirm { 
    max-width: 420px; 
} 
.auction-value > input { 
    display: inline-block; 
} 
.bot-container { 
    margin-top: 5px; 
} 
.bot-container > label > * { 
    display: inline-block; 
} 
::-webkit-input-placeholder { 
    color: black; 
    font-weight: bold; 
} 
:-moz-placeholder { 
    /* Firefox 18- */ 
    color: black; 
    font-weight: bold; 
} 
::-moz-placeholder { 
    /* Firefox 19+ */ 
    color: black; 
    font-weight: bold; 
} 
:-ms-input-placeholder { 
    color: black; 
    font-weight: bold; 
}