All geek questions in one place

Put the piece up in a paragraph with CSS

I am writing a blog post using Jekyll tagged with kramdown . I have a real side, which contains "content regarding content around the element on the side, and which can be viewed separately from this content." Aside, logically goes the first paragraph of my blog post. I would like to sail to the side next to the first paragraph, ideally, partially down.

The problem is, how can I put it aside, so is this at least part of the path to the first paragraph?

My HTML (for simplicity I translated markdown to HTML):

<article>
  <h1>Blog Title</h1>
  <p>My first paragraph...</p>
  <aside>
    <h3>Aside Heading</h3>
    <p>Aside content...</p>
  </aside>
  <p>My second paragraph...</p>
</article>

My CSS:

aside
{
  float: right;
  background-color: grey;
  border: 1px solid black;
  width: 20em;
  padding: 1em;
}

I need something like this:

Blog Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac consequat erat, eu
Vestibulum ante ipsum primis in faucibus orci luctus      +---------------+
et ultrices posuere cubilia Curae; Quisque pellentesque   | Aside here    |
pretium felis, et adipiscing ante dapibus eget. Aenean    |               |
nec lacinia eros.                                         |               |
                                                          |               |
Sem fringilla, id venenatis sem semper. Aenean malesuada  |               |
mi ac est convallis adipiscing. Sed vitae turpis congue   +---------------+
nulla ornare malesuada eget ac mi. Phasellus congue porttitor ultrices. Duis posuere
lorem at ipsum lacinia auctor. Aliquam pulvinar sollicitudin lectus sed vestibulum.

I tried / can't:

  • , , RSS-, . , .
  • , :
    • , <p>
    • . ( , ?) , html , "<aside> ...".
    • RSS-, , .
  • , .
  • / , margin-top , . . , , DOM.

JSFiddle.

, , , Pownce.com, http://web.archive.org/web/20071224051229/http://www.pownce.com/ , , .

+4
4

, , /.

, .

CSS

aside {
    position: absolute;
    top: 170px;
    right: 0px;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid black;
    width: 20em;
    height: 139px;
    padding: 1em;
    overflow: scroll;
}


h1:before {
    content: "";
    width: 2px;
    height: 150px;
    float: right;
    background-color: green;    
}

.firstp:before {
    content: "";
    width: 22em;
    height: 160px;
    float: right;
    clear: right;
    background-color: yellow;    
}

fiddle

p, firstp

p, . . . , , . , , .

, , h3. , .

, .

0

, CSS.

CSS .... (--excerpts from )

msdn

... - , , . , , , CSS , , , .

, IE10 ( wrap-flow: )

IE10 +

aside
{
    -ms-wrap-flow: both;
    -ms-wrap-margin: 10px;
    position: absolute;
    right:0;
    top:120px;
}

- , -, IE10 +, float:right, . (. )

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10+ specific styles go here */  
    aside
    {
        -ms-wrap-flow: both;
        -ms-wrap-margin: 10px;
        position: absolute;
        right:0;
        top:120px;
    }
}

:

, , ( : IE10 + wrap-flow:both)

PS: , CSS ( simlar, CSS- CSS-), Adobe -

+2

- , , , . , . , , . .

http://jsfiddle.net/jaredczerew/b7jN3/

<body>
<h1>Blog Title</h1>
<section id="left">  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac consequat erat, eu
Vestibulum ante ipsum primis in faucibus orci luctus     
et ultrices posuere cubilia Curae; Quisque pellentesque  
pretium felis, et adipiscing ante dapibus eget. Aenean    
nec lacinia eros.     
</section> 

<aside>
    <p> My aside content</p>
</aside>    
</body>


/** CSS **/
body {
width:100%
}
#left {
float:left;
width:70%;
 }
aside {
width:23%;
background:#ccc;
height:200px;
float:right;
text-align:center;
margin-top:30px
}
0

JavaScript

DOM , . , ( ), RSS- JavaScript , , CSS, JavaScript.

, div. div . HTML :

<article>
  <h1>Blog Title</h1>
  <div class="with-aside">
    <p>My first paragraph...</p>
    <aside>
      <h3>Aside Heading</h3>
      <p>Aside content...</p>
    </aside>
  </div>
  <p>My second paragraph...</p>
</article>

JavaScript div. , . jQuery, :

$(function () {
    $('.with-aside').each(function (i, e) {
        var withAside = $(e);
        var aside = withAside.find('aside');
        aside.detach();
        aside.prependTo(withAside);
        aside.addClass('floating');
        withAside.addClass('floating');
    });
});

CSS . ( , ):

aside {
    background-color: grey;
    border: 1px solid black;
    padding: 1em;
}

, JavaScript , :

aside {
    margin: 0 5ex;
}

JavaScript. , :

aside.floating {
    float: right;
    clear: right;
    width: 20em;
    margin: 0 0 0 1ex;
}
div.with-aside:before {
    content:"";
    float: right;
    width: 0;
    height: 3.75em; /* 3 lines (line-height is 1.25) */
}

jsfiddle.net/CH4Mr

JavaScript , , , . , , width: 3px; background-color: green; div.with-aside:before, , .

@vals :before, .

0
source

Source: https://habr.com/ru/post/1529510/

More articles:


All Articles