Question

我想做这个＆＃34;食物＆＃34; div在图片中看起来很像。我为这个＆＃34;食物＆＃34;做了相对于图像和位置绝对的位置。 div（在我的例子中＃34;目的地＆＃34;）。虽然，我不能把它放在中心位置，而是高于父div。

[1]: https://i.stack.imgur.com/ab1nj.png

＆＃13;

.grid div img{
    width: 100%;
    height:50%;
    position: relative;
}
.grid div div{
    background-color: white;
    z-index: 100;
    
   
    border-radius: 0;
    
    position: absolute;
  
}

＆＃13;

  <div class="grid">
            <div> 
                <div class="mini">DESTINATIONS</div>
                <img src="Middle-East-Egypt-Pyramids1.png" alt="альтернативный текст">
                <h2>Top destinations to visit</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur lorem eu est suscipit aliquam. In lectus magna, sagittis in est sed, tempus fringilla neque.</p>
                <h4>READ MORE</h1>
            </div>
            <div>item-2</div>
            <div>item-3</div>
            <div>item-4</div>
            <div>item-5</div>
            <div>item-6</div>
            <div>item-7</div>
            <div>item-8</div>
            <div>item-9</div>
            <div>item-10</div>
        </div

＆＃13;

Answer 1

包含元素： [ label | short text | very long label | short text ] [ long label | very very very | label | very long text ] [ | long text | | ] import android.content.Context; import android.view.View; import android.view.ViewGroup; import java.util.ArrayList; import java.util.List; public class TwoColumsGridLayout extends ViewGroup { private final List<List<View>> rows; private int rowCount = 0; private int firstColumWidth; private int secondColumWidth; private int thirdColumWidth; private int fourthColumnWidth; private final List<Integer> rowHeights = new ArrayList<>(); private final List<List<Integer>> cellHeights = new ArrayList<>(); private final List<Integer> firstCellsWidths = new ArrayList<>(4); private final List<Integer> thirdCellsWidths = new ArrayList<>(4); public TwoColumsGridLayout(Context context, int rowCount) { super(context); rows = new ArrayList<>(rowCount); } public void add(Context ctx, TextView l1, View t1, TextView l2, View t2) { final List<View> row = new ArrayList<>(4); row.add(l1); row.add(t1); row.add(l2); row.add(t2); rows.add(row); this.addView(l1); this.addView(t1); if (l2 != null) this.addView(l2); if (t2 != null) this.addView(t2); this.rowCount++; } public int getRowCount() { return rowCount; } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int curLeft = 0; int curBottom; int curRight; int curTop = 0; int i = 0; for (List<View> row : rows) { final int rowHeight = this.rowHeights.get(i); final List<Integer> rowCellHeights = this.cellHeights.get(i); final View v0 = row.get(0); curLeft = 0; curRight = curLeft + this.firstColumWidth; if (v0 != null) { curBottom = curTop + rowCellHeights.get(0); // Right align v0.layout(curLeft + this.firstColumWidth - this.firstCellsWidths.get(i), curTop + 7, curRight, curBottom + 7); } // final View v1 = row.get(1); curLeft += this.firstColumWidth; curRight = curLeft + this.secondColumWidth; if (v1 != null) { curBottom = curTop + rowCellHeights.get(1); v1.layout(curLeft, curTop, curRight, curBottom); } // final View v2 = row.get(2); curLeft += this.secondColumWidth; curRight = curLeft + this.thirdColumWidth; if (v2 != null) { curBottom = curTop + rowCellHeights.get(2); // Right align v2.layout(curLeft + this.thirdColumWidth - this.thirdCellsWidths.get(i), curTop + 7, curRight, curBottom + 7); } // final View v3 = row.get(3); curLeft += this.thirdColumWidth; curRight = curLeft + this.fourthColumnWidth; if (v3 != null) { curBottom = curTop + rowCellHeights.get(3); v3.layout(curLeft, curTop, curRight, curBottom); } curTop += rowHeight; i++; } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); final int parentWidth = MeasureSpec.getSize(widthMeasureSpec); // Compute first column width firstColumWidth = 0; for (List<View> row : rows) { final View v = row.get(0); if (v != null) { v.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); measureChild(v, widthMeasureSpec, heightMeasureSpec); final int w = v.getMeasuredWidth(); if (firstColumWidth < w) { firstColumWidth = w; } } } // Compute third column width thirdColumWidth = 0; for (List<View> row : rows) { final View v = row.get(2); if (v != null) { v.setLayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); measureChild(v, widthMeasureSpec, heightMeasureSpec); final int w = v.getMeasuredWidth(); if (thirdColumWidth < w) { thirdColumWidth = w; } } } secondColumWidth = (parentWidth - firstColumWidth - thirdColumWidth) / 2; fourthColumnWidth = parentWidth - firstColumWidth - secondColumWidth - thirdColumWidth; // Clear this.rowHeights.clear(); this.cellHeights.clear(); this.firstCellsWidths.clear(); this.thirdCellsWidths.clear(); // Compute heights int height = 0; for (List<View> row : rows) { final ArrayList<Integer> rowCellHeights = new ArrayList<>(4); cellHeights.add(rowCellHeights); int rowHeight = 0; // First column final View v0 = row.get(0); if (v0 != null) { int h = v0.getMeasuredHeight(); this.firstCellsWidths.add(v0.getMeasuredWidth()); rowCellHeights.add(h); if (rowHeight < h) { rowHeight = h; } } else { this.firstCellsWidths.add(0); } // Second column final View v1 = row.get(1); if (v1 != null) { v1.setLayoutParams(new ViewGroup.LayoutParams(secondColumWidth, LayoutParams.WRAP_CONTENT)); measureChild(v1, widthMeasureSpec, heightMeasureSpec); int h = v1.getMeasuredHeight(); rowCellHeights.add(h); if (rowHeight < h) { rowHeight = h; } } // Third column final View v2 = row.get(2); if (v2 != null) { int h = v2.getMeasuredHeight(); this.thirdCellsWidths.add(v2.getMeasuredWidth()); rowCellHeights.add(h); if (rowHeight < h) { rowHeight = h; } } else { this.thirdCellsWidths.add(0); } // Fourth column final View v3 = row.get(3); if (v3 != null) { v3.setLayoutParams(new ViewGroup.LayoutParams(fourthColumnWidth, LayoutParams.WRAP_CONTENT)); measureChild(v3, widthMeasureSpec, heightMeasureSpec); int h = v3.getMeasuredHeight(); rowCellHeights.add(h); if (rowHeight < h) { rowHeight = h; } } height += rowHeight; this.rowHeights.add(rowHeight); } setMeasuredDimension(parentWidth, height); } }应在包含（父级）上声明。元件。
嵌套元素：这将允许绝对定位嵌套（子）元素相对于其包含元素定位。

水平中心对齐：要水平对齐绝对定位的元素，请声明 position: relative和left属性值right以及简写 0的{{1}}属性值。

否定默认全角：请记住在{0}上声明margin或至少auto 绝对定位元素，以便它不会占据其包含元素的完整水平宽度（这是预期的使用width和绝对定位元素的行为 max-width的{{1}}属性值。

调整垂直偏移量：使用适合特定值的值声明left属性要求，例如：right。

改进选择器：最后，使用选择器更具体，而不是0，将可用类用作选择器top - class将赋予更多特异性并允许更多读者友好且直观的语法结构。

代码段示范：

＆＃13;
＆＃13;
top: -20px
＆＃13;
.grid div div
＆＃13;
＆＃13;
＆＃13;

Answer 2

在相对div中设置绝对div是正确的。现在将左/右位置添加到食物div。设置否定的“顶部”会将其置于父div之外，使其具有您想要的外观。

position: absolute;
left: 50%;
top: -10px;

如何将div设置为高于父div？

2 个答案: