Question

我想像这样做一个div

我使用了两个<div>，其中包含两个<h2>，并且必须替换父<div>的顶部和底部。这是我的代码：

.parent {
	 background: #eae8db;
	 margin: 20px;
	 border: 1px solid black;
	 position: relative;
	 height: 300px;
}

.top {
  background-color:#d6d1b1; 
  height: 15%; 
  width: 100%; 
  position: absolute;
  top: -06%; 
  left: -03.7%; 
  line-height:100px; 
  vertical-align:middle;
}

h2{ text-align: center;}

.center {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	}

.bottom{
  background-color:#24bfd1;
  height: 5%; 
  width: 100%; 
  position: absolute;
  bottom : 60%;
  left: -03.7%; 
  line-height:100px; 
  vertical-align:middle;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="parent" >
    <div class="top">
      <h2>E-book</h2>
    </div>
    <img class="center" src="https://picsum.photos/200">
    <div class="bottom">
      <h2>Voir</h2>
    </div>
  </div>
</body>
</html>

链接到JsFiddle

有人可以帮助我适应它吗？

Answer 1

我刚刚在CSS中进行了一些更改，将其替换应该可以：

.parent {
  background: #eae8db;
  border: 1px solid black;
  display: flex;
  align-items:center;
  justify-content:center;
  height: 300px;
  position:relative;
}

.top {
  background-color:#d6d1b1; 
  height: 15%; 
  width: 100%; 
  position:absolute;
  top:0;
  display:flex;
  justify-content:center;
  align-items:center;
}

.bottom{
  background-color:#24bfd1;
  height: 12%; 
  width: 100%; 
  position: absolute;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

Answer 2

我根据您的DOM创建了一个小提琴： https://jsfiddle.net/xy0zqsnt/1/

我也试图重用您的CSS类，但是我扔掉了一些东西，这对我来说没有意义。仍有改进的空间，但我希望您能够认识到CSS的变化。

要点是在display:flex CSS类中使用.parent。 Flexbox对于这样的布局任务有很多帮助，请确保将其签出（例如：https://css-tricks.com/snippets/css/a-guide-to-flexbox/-但那里有很多资源！）

HTML

 <div class="parent" >
    <div class="top">
      <h2>E-book</h2>
    </div>
    <img class="image" src="https://picsum.photos/200">
    <div class="bottom">
      <h2>Voir</h2>
    </div>
  </div>

CSS

h2{ text-align: center;}

.parent {
  background: #eae8db;
  margin: 20px;
  height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.top {
  background-color:#d6d1b1; 
  width: 100%; 
}

.bottom{
  background-color:#24bfd1;
  width: 100%; 
}

.image{
  margin: 1em;

}

Answer 3

Set newWs = Nothing
On Error Resume Next
Set newWs = ThisWorkbook.Sheets(wsName)
On Error GoTo 0
If newWs Is Nothing Then
    ' Sheet doesn't exist, create a new one and name it
    Set newWs = ThisWorkbook.Sheets.Add(After:=Sheets(Sheets.Count))
    newWs.Name = ws1.Cells(URL.row, 2).Value & "x" & ws1.Cells(6, 7).Value
Else
    ' Sheet already there, clear its content
     newWs.UsedRange.ClearContents
End If

    (..Load HTML and split..)

' Do your own transpose into a 2nd array and dump that into sheet
Dim brr
ReDim brr(LBound(arr) To UBound(arr), 1 To 1)  ' Make it 2-dimensional
Dim i As Long
For i = LBound(arr) To UBound(arr)
    brr(i, 1) = arr(i)
Next i
Range("A1").Resize(UBound(arr) + 1, 1).Value = brr

div位于div的顶部和底部，而h2位于中心

3 个答案: