Блог

Главная - Вопросы по программированию - Создание сетки с двумя разделами в одном контейнере

Создание сетки с двумя разделами в одном контейнере

#html #css

Вопрос:

Я работаю над проектом и пытаюсь создать сетку с двумя секциями в одном контейнере . В одном разделе свяжитесь с нами, а на других заданиях в разделе я много раз пытался, но не смог найти проблему с кодом. Может кто-нибудь, пожалуйста, помочь, так как я новичок в этом и застрял на одном и том же с 1 недели ? Любая помощь будет оценена по достоинству.

С уважением

 .work-bottom {
 width: 20%;
 padding: 50px 100px 60px;
 text-align: center;
 color: #ffffff;
 margin: 0px !important;
 }
 .work-bottom .title {
 color: #ffffff;
 font-size: 29px;
 }
 .work-bottom .desc {
 margin: 30px 0px 40px 0px;
 font-size: 15px;
 }
 .work-bottom .contact-btn {
 color: #ffffff;
 border: solid 1px;
 padding: 10px 36px;
 font-size: 17px;
 font-family: 'Montserrat';
 transition: 0.2s;
 border-radius: 2px;

 }
 .work-bottom .contact-btn:hover {
 background: #ffffff;
border: none;
 }
 .work1 {
 background: #0d4c8f;
 }
 .work1 .contact-btn:hover{
 color: #0d4c8f;
 }
 .work2 {
 background: #6e8e3b;
 }

 .work2 .contact-btn:hover{
 color: #6e8e3b;
 }
 .work-content {
 max-width: 330px;
 line-height: 20px
 }
 .right-flow {
 margin: 0 0 0 auto ;
 }
@media all and (max-width: 980px) {
 .work-content{
 margin: 0 auto;
 }
}
@media all and (max-width: 768px) {
 .work-bottom{
 padding: 50px 30px 60px 
 }
 .work-bottom .title {
 font-size: 22px;
 }
.work-bottom .contact-btn{
 font-size: 18px;
}
} 
 <div class="row">
<div class="work-bottom work1 et_pb_column">
 <div class="work-content right-flow">
 <h2 class="title">Work with Us</h2>
 <p class="desc">conversation about what you need to succeed </p>
 <a class="contact-btn" href="/about/contact-us/">CONTACT US</a>
 </div>
</div></div>

<div class="work-bottom work2 et_pb_column">
 <div class="work-content">
 <h2 class="title">Work for Us</h2>
 <p class="desc">Explore exciting opportunities to join our team.</p>
 <a class="contact-btn" href="/about/careers/">EXPLORE JOBS</a>
 </div>
</div>
    </div>

Ответ №1:

Если вы используете bootstrap, вы можете обновить свой html следующим кодом

 <div class="d-flex">
  <div class="work-bottom work1 et_pb_column">
    <div class="work-content right-flow">
      <h2 class="title">Work with Us</h2>
      <p class="desc">conversation about what you need to succeed </p>
      <a class="contact-btn" href="/about/contact-us/">CONTACT US</a>
    </div>
  </div> 
  <div class="work-bottom work2 et_pb_column">
    <div class="work-content">
       <h2 class="title">Work for Us</h2>
       <p class="desc">Explore exciting opportunities to join our team.</p>
       <a class="contact-btn" href="/about/careers/">EXPLORE JOBS</a>
     </div>
   </div>
</div>

Ответ №2:

У тебя было еще одно погружение

 .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.work-bottom {
 /*width: 20%;*/
   padding: 50px 100px 60px;
   text-align: center;
   color: #ffffff;
   margin: 0px !important;
 }
 .work-bottom .title {
   color: #ffffff;
   font-size: 29px;
 }
 .work-bottom .desc {
   margin: 30px 0px 40px 0px;
   font-size: 15px;
 }
 .work-bottom .contact-btn {
   color: #ffffff;
   border: solid 1px;
   padding: 10px 36px;
   font-size: 17px;
   font-family: 'Montserrat';
   transition: 0.2s;
   border-radius: 2px;

 }
 .work-bottom .contact-btn:hover {
   background: #ffffff;
   border: none;
 }
 .work1 {
 background: #0d4c8f;
 }
 .work1 .contact-btn:hover{
 color: #0d4c8f;
 }
 .work2 {
 background: #6e8e3b;
 }

 .work2 .contact-btn:hover{
 color: #6e8e3b;
 }
 .work-content {
 max-width: 330px;
 line-height: 20px
 }
 .right-flow {
 margin: 0 0 0 auto ;
 }
@media all and (max-width: 980px) {
 .work-content{
 margin: 0 auto;
 }
}
@media all and (max-width: 768px) {
 .work-bottom{
 padding: 50px 30px 60px 
 }
 .work-bottom .title {
 font-size: 22px;
 }
.work-bottom .contact-btn{
 font-size: 18px;
}
} 
 <div class="row">
  <div class="work-bottom work1 et_pb_column">
    <div class="work-content right-flow">
      <h2 class="title">Work with Us</h2>
      <p class="desc">conversation about what you need to succeed </p>
      <a class="contact-btn" href="/about/contact-us/">CONTACT US</a>
    </div>
  </div>

  <div class="work-bottom work2 et_pb_column">
    <div class="work-content">
      <h2 class="title">Work for Us</h2>
      <p class="desc">Explore exciting opportunities to join our team.</p>
      <a class="contact-btn" href="/about/careers/">EXPLORE JOBS</a>
    </div>
  </div>
</div>
Метки: