Ich arbeite an einer Website (HTML) und habe Probleme, die Elemente richtig auszurichten. Im Moment sieht meine Seite wie HIER aus, aber ich möchte, dass sie wie HIER. Im Wesentlichen möchte ich ein 2 x 2-Raster erstellen. Ich weiß nicht, welcher Teil des Codes es mir nicht erlaubt, zwei Elemente in einer Zeile zu haben.

Vielen Dank im Voraus für Ihre Hilfe!

<title></title>
<style type="text/css">body {

  color: #404040;
  font-size: 14px;

  line-height: 22px;


  padding-top: 20px;
}

.card {
  display: inline-block;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
  margin: 5px;
  position: relative;
  margin-bottom: 50px;
  transition: all .2s ease-in-out;
}

.card:hover {
  /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  margin-bottom: 54px;
}

.image {
  height: 200px;
  opacity: .7;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
  height: 200px;
  opacity: 1;
}

.text {
  background: #FFF;
  padding: 20px;
  min-height: 200px;
}

.text p {
  margin-bottom: 0px;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  margin-top: -50px;
  right: 20px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  background: #0066A2;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.fab:hover {
  background: #910500;
  cursor: pointer;
  -ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>

<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

<div class="text">
<div class="fab">+</div>

<h3>Our Community</h3>

<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>
1
Shay150 22 Feb. 2020 im 03:12

5 Antworten

Beste Antwort

Hier ist der richtige Code:

<title></title>
<style type="text/css">
body {

    color: #404040;
    font-size: 14px;

    line-height: 22px;


    padding-top: 20px;
}

.card {
    display: inline-block;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
    margin: 5px;
    position: relative;
    margin-bottom: 50px;
    transition: all .2s ease-in-out;
}

.card:hover {
    /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    margin-bottom: 54px;
}

.image {
    height: 200px;
    opacity: .7;
    overflow: hidden;
    transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
    height: 200px;
    opacity: 1;
}

.text {
    background: #FFF;
    padding: 20px;
    min-height: 200px;
}

.text p {
    margin-bottom: 0px;
}

.fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    margin-top: -50px;
    right: 20px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 48px;
    line-height: 48px;
    text-align: center;
    background: #0066A2;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}

.fab:hover {
    background: #910500;
    cursor: pointer;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.row {
    display: flex;
}
</style>

<div class="container">
<div class="row">

    <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
        <div class="card">
            <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

            <div class="text">
                <div class="fab">+</div>

                <h3>Our Community</h3>

                <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
        <div class="card">
            <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

            <div class="text">
                <div class="fab">+</div>

                <h3>Our Community</h3>

                <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
            </div>
        </div>
    </div>
</div>
</div>

<div class="container">
<div class="row">
    <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
        <div class="card">
            <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

            <div class="text">
                <div class="fab">+</div>

                <h3>Our Community</h3>

                <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
        <div class="card">
            <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

            <div class="text">
                <div class="fab">+</div>

                <h3>Our Community</h3>

                <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
            </div>
        </div>
    </div>
</div>
0
Khaled Alam 22 Feb. 2020 im 00:31

Hoffe das hilft dir.

body {
  color: #404040;
  font-size: 14px;
  line-height: 22px;
  padding-top: 20px;
}

.card {
  display: inline-block;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
  margin: 5px;
  position: relative;
  margin-bottom: 50px;
  transition: all .2s ease-in-out;
}

.card:hover {
  /*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  margin-bottom: 54px;
}

.image {
  height: 200px;
  opacity: .7;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.image:hover,
.card:hover .image {
  height: 200px;
  opacity: 1;
}

.text {
  background: #FFF;
  padding: 20px;
  min-height: 200px;
}

.text p {
  margin-bottom: 0px;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: absolute;
  margin-top: -50px;
  right: 20px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 48px;
  line-height: 48px;
  text-align: center;
  background: #0066A2;
  -webkit-transition: -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out;
}

.fab:hover {
  background: #910500;
  cursor: pointer;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/darkly/bootstrap.min.css">
<div class="container">
  <div class="row">

    <div class="col-md- col-lg-6 col-xs-6 col-sm-6">
      <div class="card">
        <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

        <div class="text">
          <div class="fab">+</div>

          <h3>Our Community</h3>

          <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
        </div>
      </div>
    </div>

    <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6">
      <div class="card">
        <div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>

        <div class="text">
          <div class="fab">+</div>

          <h3>Our Community</h3>

          <p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
        </div>
      </div>
    </div>


  </div>
</div>
0
vadivel a 22 Feb. 2020 im 00:34

Wie Sie im folgenden Beispiel sehen können, können Sie Ihr Ziel erreichen:

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.item {
  height: 100px;
  flex-basis: 50%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.cyan {
  background-color: cyan;
}
<div class="wrapper">
  <div class="item red">item 1</div>
  <div class="item blue">item 2</div>
  <div class="item green">item 3</div>
  <div class="item cyan">item 4</div>
</div>
0
ali.rezaie 22 Feb. 2020 im 00:34

Um 2 oder mehr Divs inline zu halten, können wir verschiedene CSS-Eigenschaften verwenden, wie: display: inlie-block, float: left, using table, display: table und display: table-cell, flex box und so weiter. Hier ist ein einfaches Beispiel unten

body * {
  box-sizing: border-box; /* very usefull for responsive design */
}
.container {
  width: 100%;
  float: left; /* not necessary all the times, depends*/
}
.card {
  width: 50%;
  float: left;
  padding: 10px;
}
.card:nth-child(:nth-child(2n+1) {
  clear: left
}
0
Abhijit Sil 22 Feb. 2020 im 00:33

Überprüfen Sie dies Wickeln Sie die Elemente in div und verwenden Sie dann display:flex

https://jsfiddle.net/rkv88/ug3qk1m5

0
Rkv88 - Kanyan 22 Feb. 2020 im 00:27