Перемещение начальной загрузки вправо

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Я пытаюсь переместить текст вправо, но этого не происходит. Я потратил более 2 часов на то же самое, но все равно не повезло. Что я делаю не так. Я использую Bootstrap3. Ниже приведен мой код и jsFiddle.

HTML

 <table>
  <tr>
    <td>
      <a href=''><h3>Ask a Question </h3></a>
      <div class="pull-left">
        <a href='' class="tag">ABCD</a>
        <a href='' class="tag">ABCD</a>
        <a href='' class="tag">ABCD</a>
      </div>
      <div class="pull-right time">
        <span class="asked_time"> asked  2 mins ago</span>
        <a href="" class="questioner"> Praful Bagai </a> <span class="questioner_points"> 2300</span>
      </div>
    </td>
  </tr>
</table>

asked 2 mins ago должен переместиться вправо.
jsFiddle

1. Вы имеете в виду, что это asked 2 mins ago должно переместиться вправо от имени пользователя?

2. Нет. весь div должен переместиться вправо. Теги должны оставаться слева, а time div — справа.

3. разве это уже не справа? по крайней мере, для меня. в чем, по-видимому, проблема?

4. @K3v1n — я хочу, чтобы он был в крайнем правом углу.

5. jsfiddle.net/emg0xkek/8

Ответ №1:

Я думаю, что проблема в таблице.
Дайте ему a width:100%; и удалите float:left; на td.

 table {width:100%;}
td {float:left; /* remove this /*

Рабочая демонстрация

Или вместо удаления float:left; дайте td ширину в px или % .

Обновление после комментария от K3v1n:

Добавьте класс в свою таблицу следующим образом: (вместо того, чтобы использовать css, чтобы придать ему 100%)

 <table class="col-xs-12">

1. он использует bootstrap. лучше использовать встроенный класс col-xs-12 для 100% ширины

2. предоставление ширины таблицы равной 100% или использование col-xs-12 не решает проблему.

3. Предоставленная вами демонстрационная ссылка не работает, если float:left она сохранена.

4. Я хочу сохранить float:left , потому что это нарушает некоторые вещи, которые я не могу воспроизвести в jsfiddle.

5. @PythonEnthusiast можете ли вы добавить width:100%; в td?

Ответ №2:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="col-xs-12">
  <tr>
    <td>
      <a href=''><h3>Ask a Question </h3></a>
      <div class="pull-left">
        <a href='' class="tag">ABCD</a>
        <a href='' class="tag">ABCD</a>
        <a href='' class="tag">ABCD</a>
      </div>
      <div class="pull-right time">
        <span class="asked_time"> asked  2 mins ago</span>
        <a href="" class="questioner"> Praful Bagai </a>   <span class="questioner_points"> 2300</span>
      </div>
    </td>
  </tr>
</table>

Вам нужно указать width: 100%; в <table> теге

col-xs-12 это класс начальной загрузки, который дает таблице 100% ширину

1. он использует bootstrap. лучше использовать встроенный класс col-xs-12 для 100% ширины

2. предоставление ширины таблицы равной 100% или использование col-xs-12 не решает проблему.

Ответ №3:

  <img src="..." alt="..." class="pull-right">

Пожалуйста, проверьте эту ссылку: -http://code.makery.ch/library/more-html-css/image-bootstrap/

Ответ №4:

Добавьте класс ‘.table’ в свою таблицу и удалите ‘float: left’ в TD.

https://jsfiddle.net/emg0xkek/11/

 <table class="table">
...
</table>

td{

}