Geek asks and answers

Absolute positioning and floats

I have a rather unusual layout that I am trying to make a reality. There is a div containing, for argumentation, that should be fixed at 200px on the left and top of the wrapper.

Then I have a set of square images that will pop up and continue to the edge of the browser window, and wrap around an absolutely positioned div. I know that absolute positioning draws a div from the document stream, which means that I cannot come up with a simple solution for this.

Has anyone developed a way to solve this problem? Potentially with javascript?

EDIT: here's a rough outline: link

+3
source share
4 answers

, , , , 3 ( divs) .

html , javascript, .

, , javascript / ( ). .

0

: , . float:

(: http://i.stack.imgur.com/KAqxZ.png)

<style>
#cont {
  width: 100px;
}   
.small {
  float:left;
  height:25px;
  width:25px;
  background-color:#00F;
}   
.big {
  float:left;
  height:50px;
  width:50px;
  background-color:#F00;
}   
.long {
  float:left;
  height:50px;
  width:25px;
  background-color:#F0F;
}   
.long .small {
  background-color:#F0F;
}   
</style>

<div id="cont">
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="small"></div>
  <div class="long">
    <div class="small"></div>
    <div class="small"></div>
  </div>
  <div class="big"></div>
  <div class="small"></div>
  <div class="small"></div>
</div>

:

- :

<div class="absolute-wrapper">
  <div><!-- whatever content you intended for the absolute div... --></div>
  <div class="float-left">...</div>
  <div class="float-left">...</div>
  ...
</div>

, . .

0

canvas, . javascript, javascript.

, , , , , , - , HTML, , . , , flexbox...

0

javascript/jQuery, :

, ...

Step 1: Remove all divs from dom that have a class with a name fakeSquare. Sort of

 $('.fakeSquare').remove();

Step 2: Calculate the number of red divs in one row. Save this number in squaresPreRow. Something like: var squaresPreRow = floor( window width / square width ).

Step 3. After the squaresPreRow + 1red square div add two empty divs. So ...

$("div.redSquare")
    .index(squaresPreRow + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

Step 4: add two more squares for the third row ...

$("div.redSquare")
    .index((squaresPreRow * 2) + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

Step 5: And again ...

$("div.redSquare")
    .index((squaresPreRow * 3) + 1)
    .append("<div class="fakeSquare redSquare"></div><div class="fakeSquare redSquare"></div>");

Finally, you want to call this function when the DOM is ready and whenever the window has changed.

This may require some tweaking, but hopefully you can get started.

0
source

More articles:


All Articles