Отображение материализуемых кнопок css бок о бок

Amin Baig спросил: 31 июля 2018 в 09:32 в: html

У меня есть следующий макет для карточек изображений, используя материализацию css:

, поскольку вы можете видеть, что мои кнопки расположены один над другим , вот мой html:

 <div class="col m4 14">
                <div class="card hoverable">
                    <div class="card-image">
                        <a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
                            <img class="materialboxed" src="/uploads/{{imageName}}" width="250">
                        </a>
                    </div>                    <div class="card-action2">
                        <form action="/user/{{id}}?_method=DELETE" method="POST">
                            <button type="submit" class="btn-floating btn waves-effect waves-light red">
                                <i class="material-icons">delete</i>
                            </button>
                        </form>
                        <form action="/user/{{id}}?_method=DELETE" method="POST">
                            <button type="submit" class="btn-floating btn waves-effect waves-light blue">
                                <i class="material-icons">edit</i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>

Я использую стандартный материализую css и не внесли никаких изменений в файл materialize.css. Как я могу использовать обе кнопки в одной и той же строке и бок о бок, потянув в нижнюю правую часть изображения.

Я также хочу масштабировать изображения до того же размера, что и изображения не того же размера, что и карты разных размеров.

Спасибо заранее, ребята.

2 ответа

Badgy ответил: 31 июля 2018 в 09:36

Вы должны использовать style="display: inline;", потому что формы являются элементами уровня блока.

                    <form style="display:inline;" action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light red">
                            <i class="material-icons">delete</i>
                        </button>
                    </form>
                    <form style="display: inline;" action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light blue">
                            <i class="material-icons">edit</i>
                        </button>
                    </form>
Amin Baig ответил: 31 июля 2018 в 09:38
Спасибо, Баджи, это решило мою первую проблему :-) Можете ли вы также помочь мне с отображением карт одинакового размера, независимо от того, каков фактический размер изображения?
Badgy ответил: 31 июля 2018 в 09:42
@AminBaig Вы можете попытаться дать каждой карточке фиксированную ширину и высоту, я не дома, поэтому я ничего не могу проверить прямо сейчас…: /
Amin Baig ответил: 31 июля 2018 в 09:44
Я пробовал это, но растягивает изображения. Я видел галереи изображений, которые заполняют карту изображением, не растягивая их, но не могу найти пример кода, как это сделать.
Badgy ответил: 31 июля 2018 в 09:46
@AminBaig Изображения всегда имеют установленное разрешение и соотношение, вы не можете поместить любое изображение в один и тот же кадр, не растягивая его, в одном приложении я просто попытался получить изображения с почти равным соотношением сторон, а затем ограничил размер карты.
Amin Baig ответил: 31 июля 2018 в 09:46
Я также решил выровнять кнопки вправо, назначив блоку действия 2 для карты выравнивание по правому краю.
bahman parsamanesh ответил: 31 июля 2018 в 09:50

Вы можете использовать систему сетки Materialise, чтобы сделать это и расположить элементы так, как вы хотите. например, если вы поместите кнопки в два класса col s6, их положение будет располагаться рядом.

измените свой код следующим образом:

<div class="col m4 l4">
            <div class="card hoverable">
            <div class="row">
                  <div class="col s12">
                  <div class="card-image">
                    <a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
                        <img class="materialboxed" src="/uploads/{{imageName}}" width="250">
                    </a>
                </div>
                  </div>
            </div>                <div class="card-action2">
                <div class="row">
                  <div class="col s6">
                    <form action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light red">
                            <i class="material-icons">delete</i>
                        </button>
                    </form>
                  </div>
                  <div class="col s6">
                    <form action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light blue">
                            <i class="material-icons">edit</i>
                        </button>
                    </form>
                  </div>
                </div>                </div>
            </div>
        </div>
jsfiddle