Question

我在定位盒子元素方面遇到了麻烦。更具体地说，保持两个盒子元素不重叠。我附上了我的页面图像，向您展示我的意思和我的代码：

重叠问题：

overlap problem

 <!DOCTYPE html>
 <html>
 <head>
  <title>TMNT - Rancid Tomatoes</title>
  <link rel="stylesheet" href="movie.css">

   <meta charset="utf-8" />
 </head>
 <body>
 <div>
 <img class="width" src="images/rancidbanner.png" alt="Rancid Tomatoes">
 </div>

 <h1>TMNT (2015)</h1>

    <!---block one--->
    <div class="div1">

        <!---block two--->
        <div class="div2">
        <img class="tLeft" src="images/rottenlarge.png" alt="Rotten" />          <strong>33%</strong>
        </div>

    <!---block three--->
    <div class="div3">
    <img class="tRight" src="images/overview.png" alt="general overview" />
    </div>

    <!---box four--->
    <div class="div4">
           <p>HEllo relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldkn   sjdnaslkdjfnaslkdjfn sdgnaslkjgnlaskjgdn
        </p>
      </div>
     </div>


</html>


 body{
    background-color: #C8C8C8;
}

 h1{
    text-shadow: 2px 3px gray;
    margin-left: auto;
    margin-right: auto;
    width: 200px;
  }

 img.width{
    width: 100%;
 }

img.tLeft {
    float: left;
    z-index: -1;
    padding-right: 3em;
 }

img.tRight {
     float: right;
 }


.div1 {
position: relative;
width: 900px;
height: 700px;
margin-left: auto;
margin-right: auto;
border-radius: 20px;
box-shadow: 10px 10px 5px #A8A8A8;
background-color: #4dffa6;
overflow: hidden;
 }

 .div2 {
width: 100%;
height: auto;
border: 1px solid red;
overflow: hidden;
border-top-left-radius: 20px;
top: 0;
left: 0;
}

.div3 {
    position: absolute;
    width: auto;
   height: auto;
   border: 1px solid red;
    overflow: hidden;
    border-top-right-radius: 20px;
    top: 0;
    right: 0;
 }

.div4 {
    position: absolute;
width: auto;
height: auto;
border: 1px solid blue;
background-color: lightgray;
overflow: hidden;
left: 0;
 }

strong{
    font-size: 70px;
    color: red;
}

Answer 1

在真正需要之前永远不要使用位置只是改变你的coode并删除你的位置，你也给溢出隐藏高度：自动?????当你给高度自动它意味着，直到你的div高度自动数据或项目将越来越大。然后溢出并不意味着。

.div4{
height:auto;
width:300px;
float:left;
border: 1px solid blue;
background-color: lightgray;

}
.div3{
float:right;
width:300px;
height:auto;
border: 1px solid red;
overflow: hidden;
border-top-right-radius: 20px;
}

如果你给width auto这个问题发生了。给你的div赋予宽度并浮动。

Answer 2

您可以使用

Flex Box

<meta charset="utf-8">
---
title: "Untitled"
author: "Xander"
date: "September 7, 2016"
output: html_document
    self_contained: false
---

```{r mychunk, fig.show = "hide", echo = FALSE, fig.height=3, fig.width=5}
library(knitr)
library(ggplot2)

# sample data
dat <- data.frame(text = sapply(1:10, FUN = function(x) { paste0(sample(x = LETTERS, size = 15), collapse = "") }))
score_set = replicate(n = 10, expr = {data.frame(other = c("other", "other", "other", "other"), score=sample(1:7,4,TRUE))},simplify = F)

#Plot Function
plotgen<-function(score_set,other,score){
  p <- ggplot(score_set, aes(factor(other), score))
  p + geom_violin(fill = "#99CCFF") + coord_flip() + scale_x_discrete(name=NULL) +
  scale_y_continuous(breaks = round(seq(1, 7, by = 1),1), limits = c(1,7), name=NULL) + theme(axis.text.y=element_blank(),axis.title.y=element_blank(),axis.ticks.y=element_blank(),
      panel.grid.major.y = element_line(colour = "black"),
      panel.grid.minor = element_blank(),
      panel.background = element_rect(fill = "white"),
      panel.border = element_rect(colour = "black", fill=NA, size=1)) +
geom_hline(yintercept=sample(1:7,1,TRUE), size = 1.5, colour = "#334466")
}

# generate plots
invisible(lapply(seq_along(score_set), FUN = function(x) {plotgen(score_set[[x]],other,score)}))

out <- cbind(row.names(dat), 
         as.character(dat$text), 
         sprintf("![](%s%s-%s.png)", opts_current$get("fig.path"), opts_current$get("label"), 1:nrow(dat)))
kable(out, col.names = c("ID", "Text", ""))
````

CSS代码 -

<div class='main-container'>

<!-- Container for text -->
<div class='first-container'>
 <p>Hello relkgnaldfkgnadlgsknasdlkgnasldkgnaslkdgnasldknsjdnaslkdjfnaslkdjf</p>
</div>

<!-- Container for image -->
<div class='second-container'>
<img src='' alt='general overview' />
</div>
</div>

这将使两个容器分开。就这么简单。

此外，您可以根据需要应用样式。

如何防止两个盒子元素重叠？

2 个答案: