Question

目前我有两个内容框放在单独的行上并且没有连接。如果可能的话，我想把这两个盒子放在同一条线上，然后在这些盒子的两侧添加填充物。下面的图片显示了我目前所拥有的以及我希望拥有的内容。 layout

我的代码如下：

HTML -

            <h1 id="LogInHeader">LOGIN</h1>
            <div class="form-group">
                <input type="text" id="txtGRC" placeholder="Email Address">
                <input type="text" id="txtGRC" placeholder="Password">
            </div>
            <button type="submit" id="GenerateReportButton" class="btn btn-default">SECURE LOGIN</button>
            <p id="LogInForgottenPassword" style="color:white">Forgotten Password</p>
        </form>
    </content>


    <div id="carousel-example" class="carousel slide" data-ride="carousel">
        <!-- Wrapper for slides -->
        <div class="row">
            <div class="col-xs-offset-3 col-xs-6">
                <div class="carousel-inner">
                    <div class="item active">
                        <div class="carousel-content">
                            <div>
                                <img src="Content/Images/Carousel/Microscope.png" />
                                <h2 id="CarouselHeader">REAL-TIME REPORTING ON YOUR RECOVERY AUDIT</h2>
                                <p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
                                <p id="CarouselLink"><a href="#">Find out more ></a></p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div>
                                <img src="Content/Images/Carousel/Headache%20pill.png" />
                                <h2 id="CarouselHeader">FAST, QUICK ACTION</h2>
                                <p id="CarouselText">Sick of losing proft? Auditing given you a headache? Let us take care of that for you </p>
                                <p id="CarouselLink"><a href="#">Find out more ></a></p>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="carousel-content">
                            <div>
                                <img src="Content/Images/Carousel/Trolleys.png" />
                                <h2 id="CarouselHeader">PRIVATE, PUBLIC, WE DO IT ALL</h2>
                                <p id="CarouselText">Worried that we don't cover your business? We cover a wide ranges from private to public </p>
                                <p id="CarouselLink"><a href="#">Find out more ></a></p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Controls --> <a href="#carousel-example" data-slide="prev">
        </a>
        <a href="#carousel-example" data-slide="next">
        </a>
    </div>

CSS -

.carousel-content {
    color:black;
    display:flex;
    align-items:center;
    text-align: center;
}

#carousel-example{
    width: 500px;
    height: 200px;
}

#CarouselHeader{
    font-weight: bold;
    font-size: 18px;
}

#CarouselText{
    font-size: 11px;
    color: #6d6e70;
}

#CarouselLink{
    font-size: 12px;

    text-decoration: underline;
}

#CarouselLink a:link{
    color: #4f7f64;
}

#LogInForgottenPassword{
    color: white;
    font-size: 11px;
    text-decoration: underline;
    padding-bottom: 25px;
}

#LogInHeader{
    color: white;
    font-weight: bold;
    font-size: 22px;
    padding-top: 40px;
}

#LogInMain {
    border-color: red;
    border-radius: 25px;
    color: white;
}

Answer 1

使用display并为其设置内联块： http://www.w3schools.com/cssref/pr_class_display.asp

浮动属性也可以： http://www.w3schools.com/cssref/pr_class_float.asp

Answer 2

由于您已经在代码中使用了display：flex选项，我们可以使用它并使用它。

.container {
  display: flex;
}
.item {
  height: 100px;
  border: 1px solid #333;
  flex: 1;
  flex-direction: row;
  /* flex-direction: row is the initial value */
}

<div class="container">
  <div class="item">
    Item 1
  </div>

  <div class="item">
    Item 2
  </div>
</div>

Answer 3

使用以下

.inl{ border-width:thick;
 border-style:dashed;
 border-color:Black;
display:inline-block;
  width:100px;
}

<div class="inl">abc
</div>

<div class="inl">abc
</div>

}

Answer 4

.carousel-inner { display: flex; justify-content: space-between; }
.carousel-inner .item { width: 25%; }

<div class="carousel-content">
  <div>
    <img src="Content/Images/Carousel/Microscope.png" />
    <h2 id="CarouselHeader">REAL-TIME<div class="row">
      <div class="col-xs-offset-3 col-xs-6">
        <div class="carousel-inner">
          <div class="item active">
            <div class="carousel-content">
              <div>
                <img src="Content/Images/Carousel/Microscope.png" />
                <h2 id="CarouselHeader">REAL-TIME REPORTING ON YOUR RECOVERY AUDIT</h2>
                <p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
                <p id="CarouselLink"><a href="#">Find out more ></a></p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="carousel-content">
              <div>
                <img src="Content/Images/Carousel/Headache%20pill.png" />
                <h2 id="CarouselHeader">FAST, QUICK ACTION</h2>
                <p id="CarouselText">Sick of losing proft? Auditing given you a headache? Let us take care of that for you </p>
                <p id="CarouselLink"><a href="#">Find out more ></a></p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="carousel-content">
              <div>
                <img src="Content/Images/Carousel/Trolleys.png" />
                <h2 id="CarouselHeader">PRIVATE, PUBLIC, WE DO IT ALL</h2>
                <p id="CarouselText">Worried that we don't cover your business? We cover a wide ranges from private to public </p>
                <p id="CarouselLink"><a href="#">Find out more ></a></p>
              </div>
            </div>
          </div>

        </div>
      </div>
      </div> REPORTING ON YOUR RECOVERY AUDIT</h2>
    <p id="CarouselText">Our secure client area lets you view and generate reports of the auditing process in progress </p>
    <p id="CarouselLink"><a href="#">Find out more ></a></p>
  </div>
</div>

如何将两个内容框放在同一行？

4 个答案: