Очистка поплавков с помощью: после psudeo селектора?

Question

Очистка поплавков с помощью: после psudeo селектора?

0

Поэтому я пытаюсь делать поплавки, и мне нужно использовать :after техники, но это не сработает. Мне нужно очистить поплавки после красной и синей коробки. Я все пробовал. Вот мой код:

<!doctype html>
<html>
<head>
  <title>Floats!</title>

  <style type="text/css">
    /* Eric Meyer Reset CSS v2.0 - http://cssreset.com */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

    /* apply a natural box layout model to all elements */


    *, *:before, *:after {
      -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    }

@media only screen and (min-width: 768px){
    html, body {
        margin-top: 15%;
      background: #000000;
    }

    .wrapper {
      width: 90%;
      margin: 0 auto;
      padding: 1em;
      background: #3e3d3b;
      color: #fff;
    }

    .box {
      border-width: 4px;
      border-style: solid;
      height: 100px;
      margin-bottom: 1em;
    }

    .red {
      background: #ab331c;
      border-color: #6f2011;
      width: 32%;
      float: right;
      margin-right: 34%;

    }

    .box red:after{
      content: "."; 
      visibility: hidden; 
      display: block; 
      height: 0; 
      clear: both;
    }

    .blue {
      background: #4d6bb6;
      border-color: #243255;
      width: 66%;
    }

    .green {
      background: #6bbf85;
      border-color: #2c4e36;
      width: 32%;
      margin-left: 34%;
    }

    .purple {
      background: #9a74bb;
      border-color: #503d62;
      width: 32%;
      float:right;
      margin-top: -18%;
    }

    .orange {
      background: #c09344;
      border-color: #664e23;
      width: 32%;
      float:left;

    }

    .yellow {
      background: #f0e192;
      border-color: #726a44;
      height: 212px;
      float: right;
      width: 32%;
      margin-top: -17.5%;
    }

    .hotpink {
      background: #d15ecf;
      border-color: #612b60;
      width: 32%;
      float:left;

    }
}



  </style>
</head>
<body>

<div class="wrapper">
  <div class="box hotpink" id="red"></div>
  <div class="box red"></div>

  <!-- <div style="clear: both;"></div> -->

  <div class="box yellow"></div>
  <div class="box blue"></div>

  <!-- <div style="clear: both;"></div> -->

  <div class="box orange"></div> 
  <div class="box green"></div>
  <div class="box purple"></div>
</div>

</body>
</html>

Дивы с "ясными" работают для меня, но: после псевдоселектора нет. Я не знаю, настроен ли я на неправильный элемент или что. Пока я пробовал (для красной коробки):

.box.red:after
.box:after
.red:after
.box .red:after
.box red:after

Пока ничего не получилось. Пожалуйста помоги.

EDIT: Здесь http://jsfiddle.net/vQRRU/

Addy 05 окт. 2013, в 20:16

Источник

0

stackoverflow.com/questions/211383/...
rink.attendant.6 05 окт. 2013, в 17:21
0

Добавьте jsfiddle с кодом, который вы пробовали. Кроме того, в зависимости от того, что вы делаете, просто добавив overflow: hidden может очистить элементы.
Chris Herbert 05 окт. 2013, в 17:22
0

Пожалуйста, добавьте jsfiddle .
123 05 окт. 2013, в 17:32
0

Вы неправильно интерпретируете использование :after в CSS. Этот селектор не выбирает ничего, что уже есть после элемента, он создает что-то, чтобы поместить туда.
Deryck 05 окт. 2013, в 17:42
0

Вот jsfiddle jsfiddle.net/vQRRU
Addy 05 окт. 2013, в 17:42
0

Что именно вы хотите, чтобы этот код производил для вас?
Deryck 05 окт. 2013, в 17:43
0

@Deryck Да, я немного запутался в вопросе «после». Итак, как мне сделать ': after' работать как div в html, который очищает float?
Addy 05 окт. 2013, в 17:45
0

@ Я хочу, чтобы синяя коробка сидела под красными, ярко-розовыми и желтыми коробками. Он работает с div, но не с :after . Я также хочу, чтобы под синей коробкой сидели оранжевые, зеленые и фиолетовые коробки, также используя :after . Я хочу те же эффекты с :after как я бы с divs с clear . Если это имеет смысл.
Addy 05 окт. 2013, в 17:48

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

Теги:

html

css

css-float

1 ответ

Ещё вопросы

Добавьте jsfiddle с кодом, который вы пробовали. Кроме того, в зависимости от того, что вы делаете, просто добавив overflow: hidden может очистить элементы.
Вы неправильно интерпретируете использование :after в CSS. Этот селектор не выбирает ничего, что уже есть после элемента, он создает что-то, чтобы поместить туда.
Что именно вы хотите, чтобы этот код производил для вас?
@Deryck Да, я немного запутался в вопросе «после». Итак, как мне сделать ': after' работать как div в html, который очищает float?
@ Я хочу, чтобы синяя коробка сидела под красными, ярко-розовыми и желтыми коробками. Он работает с div, но не с :after . Я также хочу, чтобы под синей коробкой сидели оранжевые, зеленые и фиолетовые коробки, также используя :after . Я хочу те же эффекты с :after как я бы с divs с clear . Если это имеет смысл.

Deryck · Answer 1 · 2013-10-05T16-53-00.000Z

Ну, вы должны немного изменить свои ширины и поля, но просто добавьте clear: both; к .blue для этого. Если это что-то вроде домашней работы ТРЕБУЕТСЯ использовать :after и :before этого мне придется пересмотреть это на минуту, как только я ем свой буррито.

Да, это домашнее задание, которое требует использования :after большое спасибо за помощь.