Sử dụng CSS, làm cách nào để bạn neo phần tử vào đường cơ sở và định kích thước phần tử dựa trên yếu tố "được ghim" khác?

Question

Dưới đây là một hình ảnh của những gì tôi đang đề cập đến:

Nếu bạn có một số chiều cao h cố định từ đường cơ sở rằng những lời dối trá pin, và các yếu tố màu xanh lá cây là tự động kích thước, làm thế nào bạn có thể làm cho phần tử màu da cam lấy không gian giữa hai?

Answer 1

Có chính xác những gì bạn cần trong trường hợp này bằng cách sử dụng flexbox.

Khoảng pin xấp xỉ ở cùng độ cao trên đường cơ sở cấp hoặc lấy 1px.

Cách hoạt động: Khi phần tử màu xanh lá cây tăng thêm 10px ghim được nâng lên 5px. Tuy nhiên, thiết lập flex có nghĩa là dummy và hộp orange làm giảm 5px mỗi vì vậy giữ cho pin ở độ cao ngang nhau.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100px; 
 
    border-bottom: 1px solid black; 
 
} 
 
.dummy { 
 
    flex: 1; 
 
} 
 
.top { 
 
    height: 20px; 
 
    width: 20px; 
 
    border: 1px solid green; 
 
    position: relative; 
 
} 
 
.top div { 
 
    position: absolute; 
 
    height: 3px; 
 
    width: 3px; 
 
    background: #880015; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.bottom { 
 
    width: 50px; 
 
    border: 1px solid orange; 
 
    flex: 1; 
 
}

<div class="wrapper"> 
 
    <div class="dummy"></div> 
 
    <div class="top"> 
 
    <div></div> 
 
    </div> 
 
    <div class="bottom"></div> 
 
</div>

Answer 2

Bạn có thể sử dụng tính bảng cho việc này. Các ô bảng điền chiều rộng của nó. Nếu một ô ngắn, một ô khác sẽ mở rộng để lấp đầy phần tử của nó. Bí quyết ở đây là xoay 90º "bảng" của bạn và nó được thực hiện. . Để thay đổi 'chiều cao" của mục bạn đã ghim bạn sẽ thực sự được thay đổi chiều rộng của nó Các yếu tố neo sẽ thay đổi kích thước phù hợp

Hãy nhận biết của mặc dù điều này:. http://caniuse.com/#search=transform

.baseline{ 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 3px solid black; 
 
    display: table; 
 
    transform: rotate(90deg); 
 
    } 
 

 
.pinned,.anchored{ 
 
    display: table-cell; 
 
    } 
 

 
.pinned{ 
 
    width: 30px; 
 
    border: 3px solid green; 
 
    } 
 

 
.anchored{ 
 
    border: 3px solid orange; 
 
    }

<div class="baseline"> 
 
    <div class="pinned"> 
 
    </div> 
 
    <div class="anchored"> 
 
    </div> 
 
</div>