Question

所以，我有一个应用程序，它生成一个随机数的div，这些div总是绝对定位的。不，由于应用程序中的其他因素，我无法使它们相对。

CSS或JQuery中是否有一种方法可以使这些绝对定位的div网格化？如下所示：

     X X X
     X X X
     X X X
     etc...

截至目前，他们是这样出来的：

     X
     X
     X
     etc...

我不知道每个查询中有多少个div;可能是5，可能是80，可能是17，等等。

Answer 1

如果您知道容器的宽度，可以使用以下代码：

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style type="text/css">
.x {
  position: absolute;
}
</style>

<div id="container">
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
</div>

<script>
$(document).ready(function() {
  var offset = 10;
  var offsetTop = 10;
  var _width = $("#container").width();
  console.log(_width);

  $('.x').each(function(e, item) {
    console.log($(item));
    $(item).offset({
      top: offsetTop,
      left: offset
    });
    offset += 20;

    if (offset >= _width) {
      offsetTop += 30;
      offset = 10;
    }
  })
})
</script>

Answer 2

由于我正在使用React.js，并且react为每个元素添加了一个唯一的HTML5数据属性（即data-reactid），使用SASS，我这样做了：

library(shiny)
library(leaflet)
library(RColorBrewer)

ui <- bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 10, right = 10,
    sliderInput("range", "Magnitudes", min(quakes$mag), max(quakes$mag),
      value = range(quakes$mag), step = 0.1
    ),
    selectInput("colors", "Color Scheme",
      rownames(subset(brewer.pal.info, category %in% c("seq", "div")))
    ),
    checkboxInput("legend", "Show legend", TRUE)
  )
)

server <- function(input, output, session) {

  # Reactive expression for the data subsetted to what the user selected
  filteredData <- reactive({
    quakes[quakes$mag >= input$range[1] & quakes$mag <= input$range[2],]
  })

  # This reactive expression represents the palette function,
  # which changes as the user makes selections in UI.
  colorpal <- reactive({
    colorNumeric(input$colors, quakes$mag)
  })

  output$map <- renderLeaflet({
    # Use leaflet() here, and only include aspects of the map that
    # won't need to change dynamically (at least, not unless the
    # entire map is being torn down and recreated).
    leaflet(quakes) %>% addTiles() %>%
      fitBounds(~min(long), ~min(lat), ~max(long), ~max(lat))
  })

  # Incremental changes to the map (in this case, replacing the
  # circles when a new color is chosen) should be performed in
  # an observer. Each independent set of things that can change
  # should be managed in its own observer.
  observe({
    pal <- colorpal()

    leafletProxy("map", data = filteredData()) %>%
      clearShapes() %>%
      addCircles(radius = ~10^mag/10, weight = 1, color = "#777777",
        fillColor = ~pal(mag), fillOpacity = 0.7, popup = ~paste(mag)
      )
  })

  # Use a separate observer to recreate the legend as needed.
  observe({
    proxy <- leafletProxy("map", data = quakes)

    # Remove any existing legend, and only if the legend is
    # enabled, create a new one.
    proxy %>% clearControls()
    if (input$legend) {
      pal <- colorpal()
      proxy %>% addLegend(position = "bottomright",
        pal = pal, values = ~mag
      )
    }
  })
}

shinyApp(ui, server)

}

将随机生成的绝对div作为网格定位的最佳方法？

2 个答案: