Чтобы расставить 4 блока на одной странице и правильно их выровнять, можно использовать CSS свойства, такие как float, flexbox или grid. Ниже приведены примеры с использованием каждого из этих методов:
1. С использованием float:
HTML:
```html
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
```
CSS:
```css
.block {
width: 25%;
float: left;
}
```
2. С использованием flexbox:
HTML:
```html
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
```
CSS:
```css
.container {
display: flex;
flex-wrap: wrap;
}
.block {
flex: 1 0 25%;
}
```
3. С использованием grid:
HTML:
```html
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
```
CSS:
```css
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.block {
width: 100%;
}
```
При использовании любого из этих методов, блоки должны правильно разместиться в 4 столбца на одной странице. Вы можете выбрать любой из этих подходов, в зависимости от ваших предпочтений и требований макета.