div内容的混合内联和块定位

Question

我想通过应用css样式来实现内容的组成：

我运用我的风格，我得到了结果：

## ui ##
ui <- dashboardPage(

  dashboardHeader(disable = TRUE),

  dashboardSidebar(
    sidebarMenu(
      dateRangeInput("dateRange", "Please choose date", "2018-05-01", "2018-06-30"),
      dateRangeInput("dateRange2", "Please choose date", "2018-05-01", "2018-06-30"),
      checkboxInput("comparePreviousPeriod", "Compare to previous period", FALSE)
    )
  ),

  dashboardBody(
    fluidRow(
      box(width = 12, plotOutput("satisfactionGraph"))
    )
  )
)

server <- function(input, output) {
  changing_data <- reactive({
    req(input$dateRange)
    mydata[mydata$dates >= input$dateRange[1] & mydata$dates <= input$dateRange[2],]
  })

  changing_data_2<- reactive({
    req(input$dateRange2)
    mydata[mydata$dates >= input$dateRange2[1] & mydata$dates <= input$dateRange2[2],]
  })

  pd <- position_jitter(0.5)
  output$satisfactionGraph <- renderPlot({

    p <- ggplot(changing_data(), aes(dates, satisfaction, group = 1, color="blue")) + 
      geom_line() + 
      theme_minimal() +
      xlab("Day of the year") + 
      ylab("Satisfaction level") + 
      ggtitle("User satisfaction") + 
      theme(axis.text.x = element_text(angle = 90, hjust = 1))

    if(input$comparePreviousPeriod == FALSE){
      p
    }

    else if(input$comparePreviousPeriod == TRUE){

      p + geom_line(data= changing_data_2(), aes(dates, satisfaction, color= "red"), position= pd)

    }

    else{NULL}

    })


}


shinyApp(ui, server)

li {
  position: relative;
  list-style-type: none;
  border: 1px;
  border-color: red;
  border-style: solid;
}
div {
  border: 1px;
  border-color: green;
  border-style: solid;
}

div .xx {
  display: inline;
  width:100%;
} 

div .aa {
  position: absolute;
  dislay: inline;
  left: 0;
  width:50%;
}
div .bb {
  position: absolute;
  display: inline;
  right: 0;
  width:50%;
}
div .cc {
  postion: relative;
  display: block;
} 

所以“C”在“A”和“B”之下。有人可以帮我解决吗？ 谢谢！

Answer 1

您可以使用display:flex;使内部div甚至宽度。

li {
  position: relative;
  list-style-type: none;
  border: 1px;
  border-color: red;
  border-style: solid;
}
div {
  border: 1px;
  border-color: green;
  border-style: solid;
}
.xx{
    display:flex;
}
div .aa {
 flex-basis: 100%
}
div .bb {
 flex-basis: 100%
}
div .cc {
  width:100%;
  display: block;
}

<li>
  <div class="xx">
      <div class="aa">A</div>
      <div class="bb">B</div>
    </div>
  <div class="cc">C</div>
</li>