我想在同一张卡片中显示两列任何建议的数据

时间：2018-06-13 05:38:30

标签： javascript jquery html css

＆＃13;
＆＃13; 
      .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
    
    }
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .container {
      padding: 2px 16px;
    }
    .card {
      width: 50%;
      height: 50%;
    
    }
＆＃13; 
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div><input type="text" id = "1" name="dataKey" placeholder="Enter id you want to serch" required>
      <button type="submit" value="Submit" onclick= goodfunction()>Submit</button></div>
<p></p>
        <div class="card">
        <div class="container" id="101">
          <h4><b>PRODUCTID</b></h4>
          <p>IT WILL DISPLAY THE PRODUCTID </P>
          <h4><b>TERRITORY</b></h4>
          <p1>IT WILL DISPLAY THE TERRITORY</p1>
          <h4><b>LANGUAGE</b></h4>
          <p2>IT WILL DISPLAY THE LANGUAGE OF MOVIE</p2>
          <h4><b>STARTDATE</b></h4>
          <p3>IT WILL DISPLAY THE STARTDATE</p3>
          <h4><b>ENDDATE</b></h4>
          <p4>IT WILL DISPLAY THE END DATE</p4>
          <h4><b>EXCLUSIVITY</b></h4>
          <p5>IT WILL SHOW THE EXCLUSIVITY</p5>
          <h4><b>ACQUIRING DIVISION</b></h4>
          <p6>IT WILL DISPLAY THE ACQUIRING DIVISION</p6>
          <h4><b>PRODUCT TITLE</b></h4>
          <p7>IT WILL DISPLAY THE PRODUCT TITLE</p7>
          <h4><b>MEDIA</b></h4>
          <p8>IT WILL DISPLAY THE MEDIA RIGHTS</p8>
          <h4><b>FORMAT</b></h4>
          <p9>IT WILL DISPLAY THE FORMAT</p9>
          <h4><b>OWNER</b></h4>
          <p10>IT WILL DISPLAY THE OENER OF THE MPVIE</p10>
    
        </div>
＆＃13;
＆＃13;
＆＃13;

我创建了一张卡片，我想在两列中的同一张卡片中显示数据

我使用了div宽度50％，但我无法将其分割，因此最终用户不会向下滚动

请帮助我，我已经使用了所有分割的东西但是我无法分开它

提前致谢

2 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
.container {
  width: 100%;
}

.row {
  display: flex;
  justify-content: center;
  text-align: center;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
    }
    
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .container {
      padding: 2px 16px;
    }
  </style>
</head>

<body>
  <div><input type="text" id="1" name="dataKey" placeholder="Enter id you want to serch" required>
    <button type="submit" value="Submit" onclick=g oodfunction()>Submit</button></div>



  <p></p>
  </div>
  </div>
  <div class="card">
    <div class="container" id="101">
      <div class="row">
        <div>
          <h4><b>PRODUCTID</b></h4>
          <p>IT WILL DISPLAY THE PRODUCTID </P>
          <h4><b>TERRITORY</b></h4>
          <p>IT WILL DISPLAY THE TERRITORY</p>
          <h4><b>LANGUAGE</b></h4>
          <p>IT WILL DISPLAY THE LANGUAGE OF MOVIE</p>
          <h4><b>STARTDATE</b></h4>
          <p>IT WILL DISPLAY THE STARTDATE</p>
          <h4><b>ENDDATE</b></h4>
          <p>IT WILL DISPLAY THE END DATE</p>
          <h4><b>EXCLUSIVITY</b></h4>
          <p>IT WILL SHOW THE EXCLUSIVITY</p>
        </div>
        <div>

          <h4><b>ACQUIRING DIVISION</b></h4>
          <p>IT WILL DISPLAY THE ACQUIRING DIVISION</p>
          <h4><b>PRODUCT TITLE</b></h4>
          <p>IT WILL DISPLAY THE PRODUCT TITLE</p>
          <h4><b>MEDIA</b></h4>
          <p>IT WILL DISPLAY THE MEDIA RIGHTS</p>
          <h4><b>FORMAT</b></h4>
          <p>IT WILL DISPLAY THE FORMAT</p>
          <h4><b>OWNER</b></h4>
          <p>IT WILL DISPLAY THE OENER OF THE MPVIE</p>
        </div>
      </div>




    </div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

使用此..在这里我使用flex属性来设置代码样式..你可以用它来将div分成两列

https://jsfiddle.net/68q9xbnc/5/ 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div><input type="text" id = "1" name="dataKey" placeholder="Enter id you want to serch" required>
  <button type="submit" value="Submit" onclick= goodfunction()>Submit</button></div>



    <p></p>
  </div>
  </div>
  <style>
  .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;

}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
  padding: 2px 16px;
}
.card {
  width: 100%;
  height: 50%;

}
.container {
  display: flex;
    flex-direction: column;
    column-count: 2;
    flex-wrap: wrap;
    height: 510px;
}
h4 {
  margin-right:15px;
}
p,p1,p2,p3,p5,p6 {
  max-width:50%;
}


  </style>
  </head>
  <body>
    <div class="card">
    <div class="container" id="101">
      <h4><b>PRODUCTID</b></h4>
      <p>IT WILL DISPLAY THE PRODUCTID </P>
      <h4><b>TERRITORY</b></h4>
      <p1>IT WILL DISPLAY THE TERRITORY</p1>
      <h4><b>LANGUAGE</b></h4>
      <p2>IT WILL DISPLAY THE LANGUAGE OF MOVIE</p2>
      <h4><b>STARTDATE</b></h4>
      <p3>IT WILL DISPLAY THE STARTDATE</p3>
      <h4><b>ENDDATE</b></h4>
      <p4>IT WILL DISPLAY THE END DATE</p4>
      <h4><b>EXCLUSIVITY</b></h4>
      <p5>IT WILL SHOW THE EXCLUSIVITY</p5>
      <h4><b>ACQUIRING DIVISION</b></h4>
      <p6>IT WILL DISPLAY THE ACQUIRING DIVISION</p6>
      <h4><b>PRODUCT TITLE</b></h4>
      <p7>IT WILL DISPLAY THE PRODUCT TITLE</p7>
      <h4><b>MEDIA</b></h4>
      <p8>IT WILL DISPLAY THE MEDIA RIGHTS</p8>
      <h4><b>FORMAT</b></h4>
      <p9>IT WILL DISPLAY THE FORMAT</p9>
      <h4><b>OWNER</b></h4>
      <p10>IT WILL DISPLAY THE OENER OF THE MPVIE</p10>

    </div>
相关问题
最新问题