как выровнять столбцы по вертикали, чтобы соседние строки не совпадали друг с другом - PullRequest
0 голосов
/ 25 мая 2018

Как я могу выровнять td по вертикали так, чтобы он выглядел так, как показано ниже, и текстовое поле будет рядом с «aaaa:», а также выровнено по горизонтали?

https://jsfiddle.net/rgw870ta/

enter code here

enter image description here

Ответы [ 4 ]

0 голосов
/ 26 мая 2018

Полагаю, это то, что вам нужно:

<div class="container">
        <div class="row">
          <div class="col-sm-4">
            <label>A</label>
          </div>
          <div class="col-sm-4  col-xs-4">
            <div class="col-xs-2">
            <input type="text">
          </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <label>A  </label>
          </div>
          <div class="col-sm-4 col-xs-4 ">
            <div class="col-xs-2">

            <input type="text">

            </div>
          </div>
        </div>
      </div>

изменить размер окна uotput: https://jsfiddle.net/3q3egbqs/

0 голосов
/ 25 мая 2018

Пожалуйста, проверьте следующий код и его вывод, я немного запутался, что вы на самом деле хотите, но я думаю, что одно из следующего поможет вам!

    

    <table style="width: 100%;display:table-cell;" border="0">
                <tr valign="top" >
                    <td style="width: 50px" align="right">And<br /> And</td>
                    <td style="display:block; margin-left:10px; margin-bottom:70px"> 
                        aaaaaaaaaaaaaaaaaaaaa:
                        <br />
                         bbbbbbbbbbbbbbbbbb
                        <br />
                         cccccccccccccccccccc
                    </td>
                    <td>
                        <table border="0">
                            <tr>
                                <td>
                                    <input type="text" name="lname">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>  
<br>
<br>

        <div style="display:  flex;align-items:  center;
">
                <div style="width: 50px" align="right">And<br /> And</div>
                <div style="display:block; margin-left:20px;"> 
                    aaaaaaaaaaaaaaaaaaaaa:
                    <br />
                     bbbbbbbbbbbbbbbbbb
                    <br />
                     cccccccccccccccccccc
                </div>
                <div>
                                <input type="text" name="lname">
                </div>
        </div>

 
0 голосов
/ 26 мая 2018

Попробуй это и посмотри, хочешь ли ты этого ... Я думаю, что ты пропустил div с классом container, оборачивающим все строки.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row top-buffer">
    <div class="col-md-12">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA:</div>
  </div>


  <div class="row no-margin">
    <div class="col-md-2"></div>
    <div class="col-md-5 ">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB:</div>
    <input style="margin-top:-5px" type="text" />
  </div>

  <div class="row no-margin">
    <div class="col-md-2 text-right">And</div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
  </div>


  <div class="row no-margin">
    <div class="col-md-2"></div>
    <div class="col-md-5">CCCCCCCCCCCCCCCCCCCCCCCCCCCC</div>
  </div>
  <div class="row no-margin">
    <div class="col-6 col-md-2 text-right">And</div>
    <div class="col-6 col-md-2"></div>
    <div class="col-6 col-md-2"></div>
  </div>
  <div class="row no-margin">
    <div class="col-md-2"></div>
    <div class="col-md-4">DDDDDDDDDDDDDDDDDDDDDDDDDDDDD</div>
  </div>
</div>
0 голосов
/ 25 мая 2018

Попробуйте это

  <table style="width: 70%" border="0">
                <tr valign="top" >
                    <td style="width:10px">And<br /> And</td>
                    <td style="width:20px;text-align:left; "> 
                        aaaaaaaaaaaaaaaaaaaaa:
                        <br />
                         bbbbbbbbbbbbbbbbbb
                        <br />
                         cccccccccccccccccccc
                    </td>
                    <td  style="width:70px;text-align:left;">
                                    <input type="text" name="lname">
                    </td>
                </tr>
            </table>   
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...