时间戳

首页 > 解决方案 > 网格显示没有像在 CSS 中那样制作两列

html - 网格显示没有像在 CSS 中那样制作两列

问题描述

我正在用 HTML 制作我的第一个网页，我试图将图片放在左侧，将文本和地图放在右侧，而选择器使用网格显示保持在顶部。我已经在网络的另一个页面上尝试过它并且它已经工作了，但现在它全部停留在左栏中，我无法将任何东西移到右边。

这是HTML：

<div id="cuerpores"
<select id="selecto">
            <optgroup id="opcionesselectas">
                <option value="indautxu" data-show=".indautxu">Indautxu</option>
                <option value="deusto" data-show=".deusto">Deusto</option>
                <option value="abando" data-show=".abando">Abando</option>
            </optgroup>
        </select>
        <div class="indautxu zona">
            <img id="imgres" src="imagenes/Paris_k.jpg">
            <p id="txtres"> El Paris kebab, probablemente el mejor Döner Kebab no solo del Barrio de Indautxu, sino que de toda la Gran Bilbao. El antes llamado Indautxu kebab cambió su nombre a mediados de los 10' con tal de destacar entre la competencia, poniendo a la par este humilde local con los grandes Bistros de la capital francesa. Un sitio muy recomendable para grupos de amigos, con un servicio excepcional, cuenta con una oferta irresistible, con gastos mayores a 20€ una botella de dos litros de refresco completamente gratis.</p>
            <div id="mapouter">
                <div class="gmap_canvas">
                    <iframe width="486" height="296" id="gmap_canvas" src="https://maps.google.com/maps?q=paris%20kebab%20bilbao&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
                    </iframe>
                    <a href="https://putlocker-is.org">putlocker</a>
                    <br>
                    <a href="https://www.embedgooglemap.net">embed google maps wordpress</a>
                </div>
            </div>
        </div>
</div>

和CSS：

#cuerpores{
    background: #FFFF;
    overflow: hidden;
    padding:  15px;
    width: 80%; 
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}

#mapouter{
    text-align:right;
    height:296px;
    width:486px;
    margin: 0 auto;
    display: block;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 3;
    border: solid;
}   

.gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:296px;width:486px;
}

#imgres{
    max-width: 500;
    max-height: 500;
    margin:  0 auto;
    display: block;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row: 2;
    border: solid;
}

#txtres{
    text-align: justify;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 2;
    border: solid;
    font-size: 20px;
    margin: 0 auto;
    display: block;
}

#selecto{
    width: 600px;
    max-height: 30px;
    font-size: 22;
    background-color: #EA4E4E;
    color: #FFFF;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 1;
    margin: 0 auto;
    display: block;
    border: solid;

}

#opcionesselectas{
    font-size: 22;
}

标签： htmlcss

解决方案

您错过了display: grid使用类添加到容器元素.indautxu

#cuerpores {
  background: #FFFF;
  overflow: hidden;
  padding: 15px;
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
}
.indautxu {
  display: grid;
}


#mapouter {
  text-align: right;
  height: 296px;
  width: 486px;
  margin: 0 auto;
  display: block;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 3;
  border: solid;
}

.gmap_canvas {
  overflow: hidden;
  background: none!important;
  height: 296px;
  width: 486px;
}

#imgres {
  max-width: 500;
  max-height: 500;
  margin: 0 auto;
  display: block;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row: 2;
  border: solid;
}

#txtres {
  text-align: justify;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row: 2;
  border: solid;
  font-size: 20px;
  margin: 0 auto;
  display: block;
}

#selecto {
  width: 600px;
  max-height: 30px;
  font-size: 22;
  background-color: #EA4E4E;
  color: #FFFF;
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row: 1;
  margin: 0 auto;
  display: block;
  border: solid;
}

#opcionesselectas {
  font-size: 22;
}
<div id="cuerpores" <select id="selecto">
  <optgroup id="opcionesselectas">
    <option value="indautxu" data-show=".indautxu">Indautxu</option>
    <option value="deusto" data-show=".deusto">Deusto</option>
    <option value="abando" data-show=".abando">Abando</option>
  </optgroup>
  </select>
  <div class="indautxu zona">
    <img id="imgres" src="https://via.placeholder.com/150x350">
    <p id="txtres"> El Paris kebab, probablemente el mejor Döner Kebab no solo del Barrio de Indautxu, sino que de toda la Gran Bilbao. El antes llamado Indautxu kebab cambió su nombre a mediados de los 10' con tal de destacar entre la competencia, poniendo a la par
      este humilde local con los grandes Bistros de la capital francesa. Un sitio muy recomendable para grupos de amigos, con un servicio excepcional, cuenta con una oferta irresistible, con gastos mayores a 20€ una botella de dos litros de refresco completamente
      gratis.</p>
    <div id="mapouter">
      <div class="gmap_canvas">
        <iframe width="486" height="296" id="gmap_canvas" src="https://maps.google.com/maps?q=paris%20kebab%20bilbao&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
                    </iframe>
        <a href="https://putlocker-is.org">putlocker</a>
        <br>
        <a href="https://www.embedgooglemap.net">embed google maps wordpress</a>
      </div>
    </div>
  </div>
</div>

推荐阅读