Много DIV по 3 в строку — как таблицой?

Question

[Андрей]

Есть DIV верстка.. причем DIV может быть много (кол-во заранее не известно), нужно сделать из них таблицу - аля на строку по 3 DIV следующая строка должна начинаться по высоте максимально предыдущего
т..е я должен написать типа

<div>my Code</div>
<div>my Code<br>dssdfdsf<br>dssdfdsf</div>
<div>my Code</div>

<div>my Code</div>
<div>my Code</div>
<div>my Code<br>dssdfdsf<br>dssdfdsf</div>

<div>my Code</div>
<div>my Code</div>
<div>my Code</div>

используется bootstrap - AngularJS
есть вариант это осуществить?

Сейчас это так -

хотелось бы ровненько

Comments

[GoodProject]

Тут JS потребуется вроде

[Андрей]

GoodProject: AngularJS вам yt JS?

Answer 1

[Виктор]

Ребятки, ну не извращайтесь. Табличные данные верстайте таблицами.

Comments

[Андрей]

Да я понимаю.. но не хочется извращаться с данными входными.. там внутри Angulat форма<div ng-repeat>форма.....</div>поэтому так... если не будет решения.. ну перепишу.. но не очень хочется.. (

[Иван Кондратьев]

И в самом деле, зачем укурыши из гугла сделали ексель из дивов? Извращенцев ей богу. Ведь надо же в таблицах ) По вопросу . Могу посоветовать использовать сетку бутстрапа или фондешена. Должно помочь.

[Виктор]

Ну форма так форма. Но дивы вам подложат свинью в самый неподходящий момент. Например, с высотой начнут капризничать. А таблица - раз поставил и забыл.

[Виктор]

Иван Кондратьев: вот строгий этот Иван Кондратьев. Но справедливый :-)

[Андрей]

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

[Андрей]

Иван Кондратьев: Дело больше в моей лени переписать под таблицу... вот и все )))) ибо это надо переделывать формат входных данных и местами логику ))))

[Иван Кондратьев]

Виктор: Я не строгий )) просто на самом деле все зависит от задачи, и в некоторых случаях бывает что для табличных данных лучше использовать не таблицы )

[Александр Зачиналов]

а все равно переписывать, вам сетка бутсрапа подляну сделает, если вы не будете заворачивать по три блока в div.row, даже если им дать что-то типа col-xs-12 col-sm-6 col-md-4

[Андрей]

Александр Зачиналов: Хех.. если я в ROW буду сам заворачивать все понятно.. задача чуть другая.. как я понимаю решения нету.. придется переписывать..... подожду.. чуть.. если не будет решения.. всем спасибо... перепишу

[Александр Зачиналов]

есть решение, но очень кривое))) div {display:inline-block; width: 33%; margin-left: -5px;vertical-align:top;}

[Александр Зачиналов]

правда придется минимальную высоту указывать

[Виктор]

Александр Зачиналов: Предлагаю поставить вопрос на голосование! :-)

[Андрей]

Александр Зачиналов: Да вроде взлетело.. и сработало.. БОльшое спасибо!

[Андрей]

Костыль в админке.. не так критично... но все равно спасибо что не надо переписывать входные данные!

[Виктор]

Андрей: так как вы сделали в итоге? мне тоже аж интересно стало.

[Андрей]

Виктор: ответил в новом комменте.. еще раз спасибо! :bow

Answer 2

[Андрей]

<div style="margin: 10px">
        <div ng-repeat="prop in data.properties" style="display:inline-block; width: 33%; vertical-align:top;">
            <h3>{{::prop.name}}</h3><hr />
            <table class="table" ng-view="prop.tags.lengtn > 0">
                <tr>
                    <td>.
........
                    </td>
                </tr>
            </table>
        </div>
</div>

как то так ))) скрин вот...

Comments

[Иван Кондратьев]

Интересная у вас сетка ) . А подскажите круд приложений на йй2 + ангуляр сложно писать? интересуюсь ради любопытства. В основном это делаю на симфони хотя сейчас многие рекомендуют ларавейл . сожалению но с yii2 не сталкивался еще (

[Виктор]

Чудненько. Возьму себе на заметку. Только (не в тему, но совет) - числа выравнивайте по правому краю.

[Андрей]

Круд руками пишу.. там в общем все стандартно...

если ничего военного то обычный... а если необычный.. то уже на ангулар...

данные типа так

$this->render('settings', ['data'=>[
			'properties'=>$properties->findAllAdminAsArray(),
			'countries'=>$countryes->findAllAsArray(),
			'tags'=>$tags->findAllAdminAsArray(),
            'page'=>Settings::loadSetting('mainPage'),

во вьюшке

<script type="text/javascript" charset="utf-8">
    window.data = <?php echo CJSON::encode($data);?>;
</script>

ну а в контроллере уже
$scope.data = angular.fromJson($window.data);

[Андрей]

Виктор: заказчик хотел так.. но предложу... думаю будет не против! ))))

[Андрей]

Иван Кондратьев: забыл указать Вас в ответе! Да и это на Yii1 - на втором примерно тоже только cамое.