如何动态添加子div直至填满父div？网页瓷砖布局开发求助

Hey there! I’ve been stuck on layout math like this more times than I can count—let’s work through this together. Here’s how to properly render all your tile divs inside the floor container, using your given pixel conversion rules:

1. First, Lock in Unit Conversions #

First, we need to translate user inputs into consistent pixel values since that’s what we’ll use for layout:

• Floor dimensions: Convert feet to pixels: 1 foot = 60px, so floorWidthPx = floorWidthFeet * 60 and floorHeightPx = floorHeightFeet * 60
• Tile dimensions: Convert inches to pixels: 1 inch = 5px, so tileWidthPx = tileWidthIn * 5 and tileHeightPx = tileHeightIn * 5

2. Calculate How Many Tiles Fit #

Next, figure out how many tiles fit horizontally (per row) and vertically (per column):

• Tiles per row: Math.floor(floorWidthPx / tileWidthPx) (use Math.floor to avoid partial tiles, or adjust if you want to handle overflow)
• Tiles per column: Math.floor(floorHeightPx / tileHeightPx)

3. Render Tiles with Positioning or Grid #

A simple loop won’t cut it—we need to position each tile correctly. Here are two solid approaches:

Option 1: Absolute Positioning (Full Control) #

Set the floor container to position: relative, then place each tile with absolute positioning by calculating its left and top values:

<!-- HTML -->
<div class="floor-container" id="floor"></div>

<!-- CSS -->
<style>
.floor-container {
  position: relative;
  border: 2px solid #333;
}
.tile {
  position: absolute;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
}
</style>

<!-- JavaScript -->
<script>
// Replace these with your actual input handling logic
const tileWidthIn = 12; // Example: 12-inch tile
const tileHeightIn = 12;
const floorWidthFeet = 10; // Example: 10-foot wide floor
const floorHeightFeet = 8;

// Convert inputs to pixels
const tileWidthPx = tileWidthIn * 5;
const tileHeightPx = tileHeightIn * 5;
const floorWidthPx = floorWidthFeet * 60;
const floorHeightPx = floorHeightFeet * 60;

// Set floor container size
const floorContainer = document.getElementById('floor');
floorContainer.style.width = `${floorWidthPx}px`;
floorContainer.style.height = `${floorHeightPx}px`;

// Calculate tile count per row/column
const tilesPerRow = Math.floor(floorWidthPx / tileWidthPx);
const tilesPerColumn = Math.floor(floorHeightPx / tileHeightPx);

// Render each tile
for (let row = 0; row < tilesPerColumn; row++) {
  for (let col = 0; col < tilesPerRow; col++) {
    const tile = document.createElement('div');
    tile.classList.add('tile');
    // Calculate position and size
    tile.style.width = `${tileWidthPx}px`;
    tile.style.height = `${tileHeightPx}px`;
    tile.style.left = `${col * tileWidthPx}px`;
    tile.style.top = `${row * tileHeightPx}px`;
    floorContainer.appendChild(tile);
  }
}
</script>

Option 2: CSS Grid (Simpler, Less Code) #

If you don’t need fine-grained positioning control, CSS Grid is a cleaner shortcut. Just define the grid template based on tile size:

// After converting units and setting floor container size...
floorContainer.style.display = 'grid';
floorContainer.style.gridTemplateColumns = `repeat(${tilesPerRow}, ${tileWidthPx}px)`;
floorContainer.style.gridTemplateRows = `repeat(${tilesPerColumn}, ${tileHeightPx}px)`;

// Create and add tiles
for (let i = 0; i < tilesPerRow * tilesPerColumn; i++) {
  const tile = document.createElement('div');
  tile.classList.add('tile');
  floorContainer.appendChild(tile);
}

4. Handle Edge Cases #

If the floor dimensions aren’t perfectly divisible by tile size, decide how to handle the leftover space:

• Leave empty space (what the Math.floor approach does)
• Resize the last row/column of tiles to fill the gap (calculate remaining width/height and adjust those tiles)
• Add partial tiles (though this might not make sense for real-world tile placement)

This should get you past the loop stuck point—feel free to ask if you need help tweaking for specific edge cases!

内容的提问来源于stack exchange，提问作者zsubzwary