Question

我正在制作一个包含三个元素的页脚，一个h3和两个div，所有元素都以一个边距百分比浮动到右边。

问题是第三个元素（div2）低于第一个div而不是向左浮动。

这是我的代码，我知道内联样式不是一个好主意。

＆＃13;

<div class="container" style="width:100%; height:70px; position:relative; float:left; padding:2%;">
  <h3 style="float:left; position:relative; margin-right:15%; top:50%; transform:translateY(-50%); ">Contact our experts</h3>
  <div class="telcontainer" style="margin-right:15%; width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
    <h3 style="position:relative; float:left; margin-left:1%;">694003903</h3>
  </div>
  <div class="mailcontainer" style=" width:auto; height:32px; position:relative; top:50%; transform:translateY(-50%); overflow:hidden; ">
    <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;">
    <h3 style="position:relative; float:left; margin-left:1%;">Mail Us</h3>
  </div>
</div>

＆＃13;

Answer 1

您有位置：reltive而不是position：rel a tive。如果你纠正它会改变什么吗？

Answer 2

如果要对齐行或列中的项目，请尝试使用<div class="container" style="width:100%; padding:2%; display: flex; align-items: center; flex-direction: column"> <h3 style="float:left;">Contact our experts</h3> <div class="telcontainer" style="width:auto; position:relative; display: flex"> <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative; float:left;"> <h3>694003903</h3> </div> <div class="mailcontainer" style=" width:auto; position:relative; display: flex"> <img src="https://images.petsmartassets.com/is/image/PetSmart/icon-experts-call?$GN1201$" style="width:32px; height:32px; position:relative;"> <h3>Mail Us</h3> </div> </div>。这将节省很多麻烦 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

library(foreign)
library(data.table)

file <- 'DownstreamSites.dbf' # ds_fish dbf
ds_fish <- read.dbf(file, as.is = FALSE)
file <- 'UpstreamSites.dbf' # nearest_us_fish dbf
us_fish <- read.dbf(file, as.is = FALSE)
file <- 'barriers.dbf' # barriers dbf
barriers <- read.dbf(file, as.is = FALSE)
file <- 'metrics.dbf' # barriers dbf
metrics <- read.dbf(file, as.is = FALSE)
metrics <- metrics[c(-1:-3,-8:-34,-41,-42,-45:-47,-49:-52)]

colnames(metrics)[13] <- "DSSite_ID"
ds_fish1 <- merge(metrics, ds_fish, by = 'DSSite_ID')
colnames(metrics)[13] <- "USSite_ID"
us_fish1 <- merge(metrics, us_fish, by = 'USSite_ID')

year <- format(as.Date(us_fish1$event_date, format="%d/%m/%Y"),"%Y")
us_fish1$year <- year
year <- format(as.Date(ds_fish1$event_date, format="%d/%m/%Y"),"%Y")
ds_fish1$year <- year

ds_fish2 <- data.table(ds_fish1)
us_fish2 <- data.table(us_fish1)

ds_DT <- ds_fish2[ , .SD[which.min(DSSite_Dis)], by = c("SiteID", "year")]
us_DT <- us_fish2[ , .SD[which.min(USSite_Dis)], by = c("SiteID", "year")]

Div不会在同一行中向左浮动

2 个答案: