段落对齐和盒子问题

时间：2018-02-15 19:45:30

标签： html css alignment

我正在寻找一个很酷的＆＃34;四四方方的＆＃34;影响我的网站。我设法让同一条线上有两个盒子，但不幸的是，我相信我的display: inline-table会阻止我这样做。

希望效果：我希望文本块在两列中，但我不希望它们像现在一样逐行。

问题：他们正在对齐而不是仅仅堆叠到底部。

极其重要：我不建议您运行该代码段，因为它设计用于宽屏幕，因此无法显示。

这就是它在我的电脑屏幕上的样子。

They're aligned not stacking in two columns

有人知道答案吗？

只要我有所需的模式，我就不介意改变我的所有设置。

＆＃13;
＆＃13; 
* {
  font-family: Helvetica;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
  color: white;
}

body {
  background-color: #2b2b2a;
}

a {
  text-decoration: none;
}

/* NOTE: CLASSES */

.nav-bar {
  box-shadow: 0 0 20px 0 rgba(0,0,0,.15);
  display: inline-block;
  background: linear-gradient(90deg, #f05ce8, #2aeceb);
  height: 60px;
  width: 100%;
  position: fixed;
}

.main-title {
  font-family: Futura;
  font-size: 32px;
  color: white;
  margin: 8px;
  position: fixed;
}

.nav-link {
  font-size: 28px;
  color: white;
  float: right;
  position: relative;
  padding: 12px 2% !important;
  margin: 0px 1%;
  font-weight: 300;
}

.vline {
  font-size: 28px;
  border-left: 1px solid white;
  top: 10%;
  float: right;
  position: relative;
  height: 80%;
}

.nav-link:before {
  content: "";
  position: absolute;
  top: 57px;
  height: 3px;
  bottom: 0;
  left: 50%;
  right:50%;
  background:white;
  transition: all ease-in-out 300ms;
}

.nav-link:hover::before,.nav-link.active:before {
  left: 0;
  right: 0;
}

.nav-selected::after {
  content: "";
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  top: 57px;
}

.nav-link:hover {
  opacity: 0.75;
}

.text-square {
  width: 45%;
  margin: 0px 2.2%;
  border: 2px solid white;
  padding: 10px 0px;
  display: inline-table;
}

.title-1 {
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}

.insquare {
  font-size: 20px;
  margin: 0px 4px;
  text-align: center;
}
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="./Database/CSS/styling.css" rel="stylesheet" type="text/css">
    <title>Bac 2018</title>
  </head>
  <body>
    <!-- NOTE: NAV BAR -->
    <nav class="nav-bar">
      <a class="main-title">PLANS DU BAC</a>
      <a class="nav-link" href="./Database/Pages/plus.html">Plus</a><a class="vline"></a>
      <a class="nav-link" href="./Database/Pages/cours.html">Cours</a><a class="vline"></a>
      <a class="nav-link" href="./Database/Pages/plans.html">Plans</a><a class="vline"></a>
      <a class="nav-link nav-selected" href="#">Accueil</a><a class="vline"></a>
    </nav><br><br><br><br><br>
    <!-- NOTE: Explanations -->
    <div class="text-square">
      <p class="title-1">COURS</p><br>
      <p class="insquare">Cette section regroupe les principaux cours de l'année. Tout ce qui est notions, objets d'études ou en relation avec l'oral se retrouve dans cette section.</p>
    </div>
    <div class="text-square">
      <p class="title-1">PLANS</p><br>
      <p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p><p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : <a href="mailto:miloertas@gmail.com?subject=Erreur%20Fiche%20Bac" style="text-decoration: underline; color: DeepSkyBlue;">miloertas@gmail.com</a>, ça évitera que tout le monde apprennent un truc faux...</p>
    </div>
    <div class="text-square">
      <p class="title-1">PLANS</p><br>
      <p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p><p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : <a href="mailto:miloertas@gmail.com?subject=Erreur%20Fiche%20Bac" style="text-decoration: underline; color: DeepSkyBlue;">miloertas@gmail.com</a>, ça évitera que tout le monde apprennent un truc faux...</p>
    </div>
    <div class="text-square">
      <p class="title-1">PLANS</p><br>
      <p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p><p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : <a href="#" style="text-decoration: underline; color: DeepSkyBlue;">miloertas@gmail.com</a>, ça évitera que tout le monde apprennent un truc faux...</p>
    </div>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

您可以使用列。

基本上，我将文本方块放在一个有两列的容器中。

＆＃13;
＆＃13; 
* {
  font-family: Helvetica;
  font-weight: 100;
  -webkit-font-smoothing: antialiased;
  margin: 0px;
  color: white;
}

body {
  background-color: #2b2b2a;
}

a {
  text-decoration: none;
}


/* NOTE: CLASSES */

.nav-bar {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
  display: inline-block;
  background: linear-gradient(90deg, #f05ce8, #2aeceb);
  height: 60px;
  width: 100%;
  position: fixed;
}

.main-title {
  font-family: Futura;
  font-size: 32px;
  color: white;
  margin: 8px;
  position: fixed;
}

.nav-link {
  font-size: 28px;
  color: white;
  float: right;
  position: relative;
  padding: 12px 2% !important;
  margin: 0px 1%;
  font-weight: 300;
}

.vline {
  font-size: 28px;
  border-left: 1px solid white;
  top: 10%;
  float: right;
  position: relative;
  height: 80%;
}

.nav-link:before {
  content: "";
  position: absolute;
  top: 57px;
  height: 3px;
  bottom: 0;
  left: 50%;
  right: 50%;
  background: white;
  transition: all ease-in-out 300ms;
}

.nav-link:hover::before,
.nav-link.active:before {
  left: 0;
  right: 0;
}

.nav-selected::after {
  content: "";
  position: absolute;
  height: 3px;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  top: 57px;
}

.nav-link:hover {
  opacity: 0.75;
}

.text-square {        /* Note: changed styles */
  /*width: 45%;*/
  margin: 0px 2.2%;
  border: 2px solid white;
  padding: 10px 0px;
  /*display: inline-table;*/
  page-break-inside: avoid;
  break-inside: avoid;
}

.title-1 {
  font-size: 25px;
  font-weight: 700;
  text-align: center;
}

.insquare {
  font-size: 20px;
  margin: 0px 4px;
  text-align: center;
}

.main {               /* new */
  -webkit-column-count: 2;
  column-count: 2;
}
＆＃13; 
<!-- NOTE: NAV BAR -->
<nav class="nav-bar">
  <a class="main-title">PLANS DU BAC</a>
  <a class="nav-link" href="./Database/Pages/plus.html">Plus</a>
  <a class="vline"></a>
  <a class="nav-link" href="./Database/Pages/cours.html">Cours</a>
  <a class="vline"></a>
  <a class="nav-link" href="./Database/Pages/plans.html">Plans</a>
  <a class="vline"></a>
  <a class="nav-link nav-selected" href="#">Accueil</a>
  <a class="vline"></a>
</nav><br><br><br><br><br>
<!-- NOTE: Explanations -->
<div class="main">
  <div class="text-square">
    <p class="title-1">COURS</p><br>
    <p class="insquare">Cette section regroupe les principaux cours de l'année. Tout ce qui est notions, objets d'études ou en relation avec l'oral se retrouve dans cette section.</p>
  </div>
  <div class="text-square">
    <p class="title-1">PLANS</p><br>
    <p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p>
    <p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : <a href="mailto:miloertas@gmail.com?subject=Erreur%20Fiche%20Bac"
        style="text-decoration: underline; color: DeepSkyBlue;">miloertas@gmail.com</a>, ça évitera que tout le monde apprennent un truc faux...</p>
  </div>
  <div class="text-square">
    <p class="title-1">PLANS</p><br>
    <p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p>
    <p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : <a href="mailto:miloertas@gmail.com?subject=Erreur%20Fiche%20Bac"
        style="text-decoration: underline; color: DeepSkyBlue;">miloertas@gmail.com</a>, ça évitera que tout le monde apprennent un truc faux...</p>
  </div>
  <div class="text-square">
    <p class="title-1">PLANS</p><br>
    <p class="insquare">Cette section regroupe tout les plans des oeuvres ou extraits vu en lecture analytique en français et littérature. Elle comporte quelques documents vu en lecture cursive ainsi que des résumés des oeuvres vu en classe.</p>
    <p class="insquare">Il est possible que certaines fiches contiennent des erreurs, idem pour les résumés d'oeuvres ou de documents en lecture cursive. Donc si vous voyez une erreur ou une information qui manque, envoyez moi un mail : <a href="#" style="text-decoration: underline; color: DeepSkyBlue;">miloertas@gmail.com</a>,
      ça évitera que tout le monde apprennent un truc faux...</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果我完全理解您想要实现的目标，只需将.text-square样式更改为：

.text-square {
  width: 45%;
  margin: 0px 2.2% 2.2%;
  border: 2px solid white;
  padding: 10px 0px;
  display: inline-table;
  vertical-align: bottom;
}
相关问题
最新问题