如何將影像放在HTML/CSS中的影像旁邊？

我試圖得到這樣的東西： 最終結果

目前，我有這個：Current result。我無法在右側其他文字下方看到富士山文字。請幫忙，如果這個問題很容易解決，我很抱歉，我不擅長 CSS。謝謝！

下面是我的 HTML 代碼：

        <div className="card">
            <img className="card--image" src={prop.item.image} width={150} />
            <div className="card--header">
                <img classname="card--marker" src="https://media.istockphoto.com/vectors/location-icon-vector-pin-sign-isolated-on-white-background-navigation-vector-id1148705812?k=20&m=1148705812&s=612x612&w=0&h=dbYgYcjgXCfB72741foF1cH3Y3Nj2Oe8GmyM-1YxWEM=" width={16}/>
                <p>{prop.item.location}</p>
                <p className="card--map"><a href={prop.item.URL}>View on Google Maps</a></p>
            </div>
            <p className="card--title">{prop.item.title}</p>
        </div> 

下面是我的 CSS 代碼：

.card {
    float: left;
    gap: 20px;
    flex-direction: column;
    margin-top: 75px;
    margin-right: 0px;
    margin-left: 200px;
    background-color: aqua;
}

.card--header {
    float: right;
    margin-left: 7px;
    background-color: antiquewhite;
    font-weight: normal;
    letter-spacing: 0.17em;
    margin-right: 0px;
    text-align: center;
    vertical-align: top;
    text-transform: uppercase;
}

.card--header > p {
    margin-top: 0;
    margin-left: 3px;
    font-size: 13px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.card--map {
    padding-left: 20px;
    color: #918E9B;
}

.card--title {
    font-weight: bold;
    letter-spacing: 0.02em;
    
}

uj5u.com熱心網友回復：

在此行中將 classname 更改為 className：

 <img classname="card--marker" src="https://media.istockphoto.com/vectors/location-icon-vector-pin-sign-isolated-on-white-background-navigation-vector-id1148705812?k=20&m=1148705812&s=612x612&w=0&h=dbYgYcjgXCfB72741foF1cH3Y3Nj2Oe8GmyM-1YxWEM=" width={16}/>
                <p>{prop.item.location}</p>

uj5u.com熱心網友回復：

您的結構幾乎不需要更新，您必須將卡片分成 2 個容器。左容器有影像，右容器有所有細節。

嘗試使用 Flex 并避免浮動，我更新了代碼片段中的所有更改，希望它對您有所幫助。謝謝

.card {
  background-color: aqua;
  display: flex;
  margin: 75px 0 0 200px;
  gap: 20px;
}

.card--detail {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.card--detail label {
  font-weight: bold;
  letter-spacing: 0.02em;
  margin-bottom: 5px;
}

.card--detail small {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card--detail p {
  font-size: 12px;
}

.card--header {
  background-color: antiquewhite;
  display: flex;
  align-items: center;
  font-weight: normal;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.card--header a {
  color: #918E9B;
  font-size: 13px;
  margin-left: 10px;
}

.card--marker {
  display: flex;
  align-items: center;
  font-size: 13px;
}

<div className="card">
  <img className="card--image" src={prop.item.image} width={150} />
  <div className="card--detail">
    <div className="card--header">
      <div className="card--marker">
        <img src="https://media.istockphoto.com/vectors/location-icon-vector-pin-sign-isolated-on-white-background-navigation-vector-id1148705812?k=20&m=1148705812&s=612x612&w=0&h=dbYgYcjgXCfB72741foF1cH3Y3Nj2Oe8GmyM-1YxWEM=" width={16}/>
        <span>{prop.item.location}</span>
      </div>
      <a href={prop.item.URL}>View on Google Maps</a>
    </div>
    <label>{prop.item.title}</label>
    <small>12 Jan, 2021 - 24 Jan, 2021</small>
    <p>Description</p>
  </div>
</div>

標籤：

上一篇：如何在html和css中調整影像、無序串列和按鈕

下一篇：AngularMaterialmat-form-field修改工具列的樣式