Question

我有一个div，里面有两个不同的div。这三个中的每一个都有宽度为（60％）的图片，其中有一些文字（40％），但它根本没有排列。文本位于正确的位置，图片位于正确的组织中，但它们位于页面太远的位置。我对CSS很新，我不知道如何修复这个

这是一张它看起来像什么的图片

HTML：

<div class="section 1">
  <p id="section1text">
    <b>ME</b><br>Hello! My name is Max Jordan. I am a student living in the UK currently doing A-Levels in Maths, Engineering, Physics and computer science. I then want to do a degree in computer science and work as a Software Engineer/Developer. I currently live in Nottingham in the UK. I love programming and creating elegant soloutions for problems.
  </p>
  <img src="section1.jpg" id="section1pic">
</div>

<div class="section 2">
  <p id="section2text">
    <b>WORK</b><br> 
  </p>
  <img src="section2.jpg" id="section2pic">

</div>

<div class="section 3">
  <p id="section3text">
  </p>
  <img src="section3.jpg" id="section3pic">

</div>

CSS：

.aboutSection{
  width: 100%;
  height:100%;
}

.section{
  text-align: center;
  display: inline-block;
  width: 90%;
  height: 20%;
  margin-left: 5%;
}

#section1text{
  float: left;
  display: inline-block;
  height: 100%;
  width:40%;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  padding: 10px;

}
#section2text{
  float: right;
  height: 100%;
  width:40%;
  float: right;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  display: inline-block;
  padding: 10px;
}
#section3text{
  float: left;
  height: 100%;
  width:40%;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  display: inline-block;
  padding: 10px;
}

#section1pic{
  float: right;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}
#section2pic{
  float: left;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}
#section3pic{
  float: right;
  position:relative;
  display: inline-block;
  height: 100%;
  width: 60%;
}

我知道CSS非常糟糕，但我只是想让它运转起来。

Answer 1

您需要从消除：

开始

padding: 10px;

或者至少将其更改为：

padding: 10px 0;

这应该从#section1text，#section2text和#section3text中移除。填充导致文本部分宽度超过40％，这不会使图像的宽度保持在60％。

Answer 2

而不是摆弄花车和定位。我想显示：flex是这种布局的一个很好的选择

检查此代码段

＆＃13;

.imgContainer {
  display: flex;
  flex-wrap: wrap;
}
.section {
  display: flex;
  border: 1px solid;
}
#section1text {
  border: 1px solid;
  width: 40%;
  background-color: #3399ff;
  border-right: 1px solid red;
  px solid;
}
.div1 img {
  width: 60%;
  height: 100%;
}
.div2 img {
  width: 60%;
  height: 100%;
  border-right: 1px solid red;
  padding: 10px;
}
.div3 img {
  width: 60%;
  height: 100%;
}
#section2text {
  width: 40%;
  background-color: #3399ff;
  color: white;
  font-size: 20;
  padding: 10px;
}
#section3text {
  background-color: #3399ff;
  color: white;
  width: 60%;
}

＆＃13;

<div class="imgContainer">
  <div class="section div1">
    <p id="section1text">
      <b>ME</b>
      <br>Hello! My name is Max Jordan. I am a student living in the UK currently doing A-Levels in Maths, Engineering, Physics and computer science. I then want to do a degree in computer science and work as a Software Engineer/Developer. I currently live
      in Nottingham in the UK. I love programming and creating elegant soloutions for problems.
    </p>
    <img src="https://exoticcars.enterprise.com/etc/designs/exotics/clientlibs/dist/img/homepage/Homepage-Hero-Car.png" id="section1pic">
  </div>

  <div class="section div2">
    <img src="https://exoticcars.enterprise.com/etc/designs/exotics/clientlibs/dist/img/homepage/Homepage-Hero-Car.png" id="section2pic">
    <p id="section2text">
      <b>WORK</b>
      <br>
    </p>


  </div>

  <div class="section div3">
    <p id="section3text">
      skfshfk
    </p>
    <img src="https://exoticcars.enterprise.com/etc/designs/exotics/clientlibs/dist/img/homepage/Homepage-Hero-Car.png" id="section3pic">

  </div>
</div>

＆＃13;

我尝试创建您需求的示例布局

希望有所帮助

Answer 3

server <- function(input, output) {
}
ui <- fluidPage(
      tabPanel("Test",
               div(style="display: inline-block;vertical-align:moddle; width: 175px;",
                   p("Choose a threshold that is ")),
               div(style="display: inline-block;vertical-align:middle; width: 100px;",
                   textInput("var1","","2")),
               div(style="display: inline-block;vertical-align:middle; width: 100px;",
                   selectInput("var2","",c("inches","cm")))
      ))
shinyApp(ui, server)

REG ADD "HKCU\Software\Google\Chrome\NativeMessagingHosts\com.chrome.example" /ve /t REG_SZ /d "%~dp0com.google.chrome.example.echo-win.json" /f

我知道你的工作非常努力，但我认为你需要阅读更多有关css并继续练习的内容。你不需要这个东西的任何ID。实际上我真的不明白你想要什么。也许是这样的？

对于为什么这些图片和文字没有排成一行感到困惑

3 个答案: