Контейнер CSS подходит для Child-Images

Question

Контейнер CSS подходит для Child-Images

0

Во-первых: я действительно пытался найти ответ, но не из них работал на меня. Вот моя проблема:

У меня есть базовый макет, где у меня есть кнопка вперед и назад в нижнем колонтитуле. Кнопки тезисов должны быть квадратичными. Поэтому я решил сделать их простыми изображениями (чтобы избежать всех проблем с попыткой масштабирования divs пропозиционально).

Изображения тезисов имеют CSS:

.galleryFooterController {
    position: relative;

    height: 100%;
    float: left;
    margin-left: 5px;

    background-color: #A0A0A0;
}

И вложены в контейнер с CSS:

#galleryFooterControlle {
    position: absolute;
    display: inline-block;
    right: 15%;
    background: white;
    height: 100%;
    padding-right: 5px;

    width: auto;
}

Но контейнер не принимает правильную ширину, так что изображения не подходят внутри и визуализируются друг под другом. Если я выберу высоту: 100% от изображений, они подходят друг к другу в контейнере.

Было бы здорово, если бы вы могли помочь мне найти версию JS для решения этой проблемы! Благодарю!

Martin 15 фев. 2014, в 20:06

Источник

1

Можете ли вы дать нам jsfiddle.com ?
Kroltan 15 фев. 2014, в 18:13
1

А что такое «квадратичная кнопка»?
Paulie_D 15 фев. 2014, в 18:22
0

Это просто квадратичное изображение, которое я использую в качестве кнопки
Martin 15 фев. 2014, в 18:23
2

"квадрат", я думаю, нет?
Kevin Chavez 15 фев. 2014, в 18:31
0

правильно. Я не англичанин. Квадратик не работает, чтобы сказать что-то должно быть квадратом?
Martin 15 фев. 2014, в 18:33
0

хахах нету Квадратичное относится к квадратам, но обычно в контексте формул, как, например, у = х ^ 2 является квадратным уравнением, потому что х в квадрате (в степени двух).
Kevin Chavez 15 фев. 2014, в 19:35
0

;) Хорошо знать
Martin 15 фев. 2014, в 19:36

Показать ещё 5 комментариев

Теги:

html

css

3 ответа

Ещё вопросы

А что такое «квадратичная кнопка»?
Это просто квадратичное изображение, которое я использую в качестве кнопки
правильно. Я не англичанин. Квадратик не работает, чтобы сказать что-то должно быть квадратом?
хахах нету Квадратичное относится к квадратам, но обычно в контексте формул, как, например, у = х ^ 2 является квадратным уравнением, потому что х в квадрате (в степени двух).

Martin · Answer 1 · 2014-02-17T15-17-00.000Z

Спасибо всем, кто понял, как решить проблему! Поскольку изображения не будут отображаться рядом друг с другом, потому что его контейнер не будет выбирать правильную ширину после масштабирования изображений, я просто сделал ширину контейнера максимально доступным местом, которое было в моем проекте 85%. Итак, теперь изображения подходят!

Еще раз спасибо!

Thillai Narayanan · Answer 2 · 2014-02-16T05-12-00.000Z

Просто я попытался с жидким макетом, удалил границу 2px белый и изменил свойство float.

.header {
        width: 98%;
        height: 50px;
        background-color: #A0A0A0;
        margin:2px 2px;
        }
.container{
        width: 85%;
        height: 400px;
        background-color: #A0A0A0;
        margin:2px 2px;
        float: left;
        }
.rightbar{
       width: 12%;
       height: 460px;
       float: left;
       background-color: #A0A0A0;
       margin-top:2px;
       margin-left: 2px;
      padding-left: 3px;
          }

Полный код http://jsfiddle.net/judearasu/5c5rq/

TimSPQR · Answer 3 · 2014-02-15T17-05-00.000Z

Вот FIDDLE, который даст вам начало.

Я не создал весь состав divs, но вы можете изменить CSS, чтобы он выглядел красивее.

Для ваших кнопок я просто использовал div в div с треугольником CSS-Tricks. Вы можете использовать.click на внешнем div для запуска вашей функции.

Здесь соответствующий CSS

.header {
  width: 100%;
  height: 50px;
  background-color: #A0A0A0;
  border: 4px solid white;
}
.container {
  width: 90%;
  height: 400px;
  background-color: #A0A0A0;
  border: 4px solid white;
  float: left;
}
.rightbar {
  width: 9%;
  height: 460px;
  border: 1px solid white;
  float: right;
  background-color: #A0A0A0;    
}
.bottomholder {
  width: 90%;
  height: 50px;
  border: 1px solid black;
}
.bottomleft {
  height: 100%;
  width: 562px;
  float: left;
  background-color: #A0A0A0;
  border-left: 2px solid white;
}
.bottombutton {
  height: 100%;
  width: 130px;
  float: left;
  background-color: #A0A0A0;
  border-left: 2px solid white;
}
.bottomright {
  height: 100%;
  width: 200px;
  float: left;
  background-color: #A0A0A0;
  border-left: 2px solid white;
}
.arrowleft {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid white;
  background-color: #A0A0A0;
  float: left;
  margin-left: 10px;
}
.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent; 
  border-right: 15px solid black;
  margin-left: 8px;
  margin-top: 5px;
}
.arrowright {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid white;
  background-color: #A0A0A0;
  float: left;
  margin-left: 10px;
}
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid black;
  margin-left: 15px;
  margin-top: 5px;
}

Спасибо за помощь! Но если бы я использовал фиксированные значения для ширины и высоты, то у меня не было бы проблемы, что контейнер слишком мал. Я мог бы просто сделать это больше! Я обновлю свой вопрос с дополнительной информацией!
@Martin затем установите .bottomholder {height: auto;}