Как изменить поток контента?

0

В этом jsfiddle я пытаюсь создать форму закладки. Существует только один треугольник, который должен изменить свое позиционирование.

<div id = "bookmark">
  <div id = "rectangle"></div>
  <div id = "triangle-topleft"></div>
  <div id = "triangle-topright"></div>
</div>

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

Вместо форм, проходящих сверху вниз. Я хочу, чтобы последняя фигура текла слева направо. Таким образом, есть 3 формы, первые два находятся в идеальном месте, но третий должен быть расположен справа от второй фигуры, а не под ней.

Какой CSS я могу использовать для этого?

  • 0
    Я явно устанавливаю положение по умолчанию в порядке предпочтения.
  • 0
    jsfiddle.net/nfxYE/3 - это было самое простое решение.
Теги:
css-position

5 ответов

1
Лучший ответ

Вы можете просто добавить float: left to #triangle-topleft и margin-left: 100px to #triangle-topright.

Чтобы удалить ненужную разметку, вы также можете использовать :before и :after псевдо-элементов вместо #triangle-*.

Поделиться
  • 0
    Не уверен, кто ответил первым, ты или Фред, но это самое простое решение.
5

Добавить float:left; to #triangle-topleft и margin-left:100px; to #triangle-topright

#triangle-topleft {
    position: static;
    width: 0;
    height: 0;
    border-top: 100px solid black;
    border-right: 100px solid transparent;
    float:left;
}
#triangle-topright {
    position: relative;
    width: 0;
    height: 0;
    border-top: 100px solid black;
    border-left: 100px solid transparent;
    margin-left:100px;
}

Пример jsFiddle

Поделиться
4

Прежде всего, вам не нужно объявлять position: static; поскольку он по умолчанию статичен (если вы не используете responsive design где вам нужно сбросить значение свойства в определенной точке разрешения), во-вторых, присвойте position: relative; к вашему #bookmark и сделать второе position: absolute; треугольника position: absolute;

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

#bookmark{
    width: 200px;
    position: relative;
}
#rectangle {
    width: 200px; 
    height: 300px; 
    background: black; 
}
#triangle-topleft {
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-right: 100px solid transparent; 
}

#triangle-topright {
    position: absolute;
    right: 0;
    width: 0; 
    height: 0; 
    border-top: 100px solid black; 
    border-left: 100px solid transparent; 
    bottom: 0;
}

Примечание. Убедитесь, что вы не сделали свою первую position: absolute; треугольника position: absolute; иначе вам нужно переместить треугольники. Но это лучший метод, который вы можете получить, поскольку вы обернули absolute внутри relative контейнера.

Вы также можете взглянуть на эту удивительную вещь - Font Awesome - Bookmark, вы можете изменить ее размер до любого размера, который вы хотите.

То, что вы пытаетесь, может быть достигнуто также с использованием :before и :after псевдо- content вместе с content. Таким образом, вы можете избавиться от дополнительных элементов треугольника.

Как я уже сказал, вы можете создать эту вещь с помощью одного элемента.

#bookmark{
  width: 200px;
  position: relative;
  height: 300px; 
  background: black; 
}

#bookmark:before {
  width: 0; 
  height: 0; 
  border-top: 100px solid black; 
  border-right: 100px solid transparent;
  display: block;
  content: "";
  position: absolute;
  bottom: -100px;
}

#bookmark:after {
  position: absolute;
  right: 0;
  width: 0; 
  height: 0; 
  border-top: 100px solid black; 
  border-left: 100px solid transparent; 
  bottom: -100px;
  display: block;
  content: "";
}

Здесь я использую :before и :after pseudo, с display: block; и content: ""; которые необходимы для того, чтобы эта работа работала, также позиционируем оба элемента, используя absolute значение со значением, установленным на -100

Демо (использование одного элемента)

Примечание:: :before и :after псевдовыхода в старых версиях IE, но вы всегда можете использовать polyfills для использования свойств CSS 3, а также для получения дополнительной информации о поддержке браузера, вы можете это проверить.

Поделиться
  • 0
    @ nativist.bill.cutting очевидно, так как я позиционировал элемент, используя эти свойства, я также отредактировал свой ответ, вы можете увидеть самую последнюю демонстрацию, которой я поделился, я только добавил это.
1

Добавить отображение: встроенный блок для обеих фигур треугольника. Они укладываются в стек, поскольку они по умолчанию отображаются: block.

Поделиться
  • 1
    В этом случае вы захотите удалить пробелы между двумя треугольниками
  • 1
    Красиво, но не идеально.
Показать ещё 1 комментарий
1

Достаточно просто добавить float:left to # triangle-topleft и # triangle-topright.

Смотрите скрипку: http://jsfiddle.net/nfxYE/

Поделиться
  • 0
    Не уверен, кто ответил первым, вы или instanceofme, но это самое простое решение.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню