如何使这两个元素并排对齐？

时间：2019-02-27 06:44:38

标签： javascript html css

我已经尝试了所有我能想到的东西，但是这两个元素根本就不会排队。我知道还有很多其他的CSS，但这只是我页面中的HTML片段。

如果您需要完整的HTML来查看我要说的内容，可以将其发布，但是在原始主题中发布的时间太长了。

.stripe {
    background-color: #79EBC6;
    height: 100%;
    width: 100%;
}
.navbar {
    margin: 0;
    right: 0;
    position: fixed;
    z-index: 999;
    background-color: #58E4B3;
    width: 100%;
    color: white;
}
.navbar a {
    color: white;
    background-color: #58E4B3;
}
.nav li {
    float:left;
}
.centered {
    text-align: center;
}

.text {
    padding: 1rem;
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    text-align: left;
    flex: 0 1 32%;
}
.cards {
    margin-top: 5em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15rem;
}
.collapse {
    margin-left: 15px;
}

.jumbotron {
    width: 50%;
    margin: auto;
    background-color: #79EBC6;
}
.carousel {
    height: 25%;
    width: 50%;
    margin: auto;
    padding: 2em;
}
.tab-pane {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: white;
}
.display-4 {
    text-align: center;
}
.fa-check {
    font-size: 1.25rem;
    padding: 1.5rem;
}
.d-flex {
    text-align: center;
    margin: auto;
}
.section {
    padding: 3rem 0;
}

.form-row {
    text-align: left;
}
.modal-body {
    text-align: left;
}
.btn-button1 {
    width: 100%;
    background-color: #58E4B3;
}
.card-body {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: white;
    text-align: left;
}
.card-body .btn-success {
    margin-left: .5em;
}

body {
    font-family: "Asap", sans-serif;
    margin:10px;
    font-size:16px;
}

#demo {
    height:100%;
    position:relative;
    overflow:hidden;
}


.green{
    background-color:#6fb936;
}
.thumb{
    margin-bottom: 30px;
}

.page-top{
    margin-top:85px;
}
<a name="tabs"></a>
<section id="tabs" class="stripe">
  <h2 class="mb-5 text-center">Tabs and Collapse Layouts</h2>
  <div class="container page-top">
    <div class="row">
      <div class="col-md-6">
        <ul class="nav nav-tabs shadow bg-light" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
              aria-controls="one" aria-selected="true">One</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
              aria-controls="two" aria-selected="false">Two</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
              aria-controls="three" aria-selected="false">Three</a>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <p class="p-3">Etriers jet couleur non capotes pendant epouses violets. Ca soixante cornette ai
              exaltait. Pile des chez dut mais agit nid hein vlan. Ton arriverent indulgence vin vie
              electrique vieillards. Ans nid ici arrivons lupanars vin regiment persuada. Coups je de
              armes crise te ou. Attendu montent or malheur battant tu il ne. Ah un closes clairs ruches.
              Ne en touffe jambes gaiete courbe veilla.
            </p>
          </div>
          <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <p
              class="p-3">Voici arbre ma coups oncle abord ou en heros. Neanmoins causaient la me
              ameliorer attardent escadrons la fusillade il. Masse ouvre avons il ai quels sa et. Cependant ma
              qu frontiere seulement. Que effrayant croissent assassins son. Levee mes uns creux laque quand.
              Visages xv epouser emmener souleve il.
            </p>
          </div>
          <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <p
              class="p-3">Societes empilait attentif eut feerique aussitot les. Nous soir vous va sous
              eaux au. En un ouvriers le physique quarante. Octogone tacherai foi fumantes toi paraitre car.
              Hagarde as en couvert ai on malheur. Minutes donnent ennemis en livides la conduit il etoffes.
              Peu coin voit vin pois cher. Executeurs pressaient on entrainait construits oh defilaient il
              decharnees. Gardait faisait escorte fatigue heureux tu humains sa. Parlaient du printemps
              sinistres causaient effrayant un laidement.
            </p>
          </div>
        </div>
      </div>
      <div id="accordion">
        <div class="card">
          <div class="card-header" id="headingOne">
            <h5 class="mb-0">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Collapsible Group Item #1
              </button>
            </h5>
          </div>
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Collapsible Group Item #2
              </button>
            </h5>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingThree">
            <h5 class="mb-0">
              <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Collapsible Group Item #3
              </button>
            </h5>
          </div>
          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
            <div class="card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1 个答案:

答案 0 :(得分：0)

您的结构如下：

<div class="row">
  <div class="col-md-6">
    <!-- tab group -->
  </div>
  <div id="accordion">
    <!-- collapsible group -->
  </div>
</div>

如果将display: flex添加到父容器.row，则两个直接子div会并排对齐。

enter image description here

相关问题
最新问题