如何排列我的列表/ pargraph，使它们与html中的图像匹配？

时间：2017-08-18 02:35:38

标签： html css

所以我为自己做了一个投资组合，并且是html和css的新手。但是我在尝试将我在Photoshop中设计的内容变为现实时遇到了麻烦。这就是我enter image description here

这就是我想要的enter image description here

我遇到网格系统问题，我使用http://www.responsivegridsystem.com/calculator/来获取网格。但是，如果你能提供一个更棒的网格系统。另一个问题是尝试排列名称：日期：例如..所以它们与图像对齐。

Here is my code: https://jsfiddle.net/d31z1z4s/

2 个答案:

答案 0 :(得分：3)

您的问题基本上是您的图像是固定宽度的，但您的容器是灵活的。当图像变得比容器大时，这就出现了问题。

解决方案是从HTML中获取宽度和高度，并将其包含在CSS中。而不是：

<img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face" width="250" height="250">

这样做：

<img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">

.col img {
  width: 100%;
  height: 100%;
}

现在，无论你的容器大小如何，你的图像都会填满那个空间。

如果您想确保图片不超过一定的尺寸，可以使用max-width。例如：

.col img {
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 250px;
}

请注意添加

.col {
  box-sizing: border-box;
}

将帮助您确定尺寸，以便您的容器始终具有您想要的尺寸，并且不会因为边框而比您想象的要大。添加box-sizing: border-box将包含大小的边框。

由于您希望图像不会变得太大，因此您需要考虑当它们换行到新行时会发生什么。一种方法是将图像置于其容器中心，然后将容器置于彼此中心。然后，使用媒体查询，确保当图像折叠为两列和一列时容器不会太宽，因此仍然可以正确地居中显示。

这是一个片段，我删除了无关的东西以证明这种效果（尝试以完整大小运行它并调整浏览器窗口的大小）。比较你自己的风格，看看我脱掉了什么;你的一些风格是不必要的，因为它们只是重复默认值。

/* general styles */
body {
  margin: 0;
}
.container {
  width: 100%;
}
.portfolio-col {
  text-align: center;
  width: 80%;
  margin: 0 auto; /* center the container for the rows */
}
.portfolio-col h2 {
  text-decoration: overline underline;
  text-decoration-color: #fff;
}
.col li {
  list-style-type: none;
}
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both; /* these styles are called a clearfix (look it up) */
}

/* each row */
.row {
  clear: both;
  padding: 0px;
}
.col {
  float: left;
  margin: 1% 3.3%; /* equally space our boxes, instead of different left and right margins; specific numbers you can adjust */
  box-sizing: border-box;
}
.col ul {
  padding-left: 0;
  width: 100%;
  max-width: 250px; /* same width and max-width as our images */
}
.col img {
  border-style: solid;
  border-color: blue;
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 250px;
}
@media all and (max-width: 1200px) { /* slightly before our images would collapse to two columns */
  /* keep our images centered when they go to two columns */
  .portfolio-col {
    max-width: calc(500px + 12%); /* width of two images + 4x 3% margins */
  }
}
@media all and (max-width: 740px) { /* slightly before our images would collase to one column */
  .portfolio-col {
    max-width: calc(250px + 6%); /* width of one image + its left and right margins */
  }
}
<section class="port-folio" id="portfolio">
  <div class="container">
    <div class="portfolio-col">
      <h2>MY PROJECTS</h2>
      <div class="row group">
        <div class="col span_1_of_3">
          <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
          <ul class="project-info">
            <li>Name: Rock</li>
            <li>Created By: Doe</li>
            <li>Date: June 2017</li>
            <li>Language: Java</li>
            <li><a href="">More Info</a></li>
          </ul>
        </div>

        <div class="col span_1_of_3">
          <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
          <ul class="project-info">
            <li>Name: Player</li>
            <li>Created By: Doe</li>
            <li>Date: August 2017</li>
            <li>Language: Java</li>
            <li><a href="">More Info</a></li>
          </ul>
        </div>

        <div class="col span_1_of_3">
          <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
          <ul class="project-info">
            <li>Name: Game</li>
            <li>Created By: Doe</li>
            <li>Date: August 2017</li>
            <li>Language: Game Maker Language (GML)</li>
            <li><a href="">More Info</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Here's a Fiddle of that

这很好用，但你可能会注意到h2并不是以较大的屏幕为中心。我们可以通过多种方式解决此问题，例如在媒体查询中将.row .col:first-of-type的左边距调整为大于3.3%，或者在媒体查询中调整标头的左边距，或者也许只需将标题移到其包装外部并进入一个始终居中的新标题。

另一种方法是 flexbox 。这需要更少的代码来获得更好的居中，但是如果你想在最后一个项目包装到新行时左对齐，那么需要采用其他样式（请参阅here和here）。

将此HTML中的HTML与您的HTML进行比较：我删除了.row元素，并移动了h2。

/* general styles */

body {
  margin: 0;
}
h2 {
  text-align: center;
  text-decoration: overline underline;
  text-decoration-color: #fff;
}
.col li {
  list-style-type: none;
}
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
  /* these styles are called a clearfix (look it up) */
}


/* grid layout with flexbox */
.portfolio-col {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.col {
  margin: 1% 3.3%;
  /* equally space our boxes, instead of different left and right margins; specific numbers you can adjust */
  flex-shrink: 0;
  box-sizing: border-box;
}
.col ul {
  padding-left: 0;
  text-align: center;
  width: 100%;
  max-width: 250px;
  /* same width and max-width as our images */
}
.col img {
  border-style: solid;
  border-color: blue;
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 250px;
}
<section class="port-folio" id="portfolio">
  <div class="container">
    <h2>MY PROJECTS</h2>
    <div class="portfolio-col">
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Rock</li>
          <li>Created By: Doe</li>
          <li>Date: June 2017</li>
          <li>Language: Java</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>

      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Player</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Java</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>

      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

<强> Here's a fiddle of that

要回答有关如何处理字幕的问题，可以选择几种方法。上面的示例使用了ul和li，这很好。

您还可以为每一行p之间使用br个标记使用span，或者甚至可以将每行包裹在display: block中并使用display: inline（因为默认情况下跨度为div。您还可以将每一行放在自己的div中（并可选择将它们全部包装在public enum TypeOfC { C1(Color.RED, C1::new), //you don't have to use different classes for every one! CX(Color.BLACK, () -> new C1(5)), C2(Color.BLUE, C2::new); private final Color m_color; private final Supplier<I> m_constructor; TypeOfC(Color color, Supplier<I> ctor) { m_color = color; m_constructor = ctor; } public Color getColor() { return m_color; } public I create() { return m_ctor.get(); } } 中以将它们组合在一起）。

答案 1 :(得分：0)

<section class="port-folio" id="portfolio">
            <div class="container">
                <div class="portfolio-col">
                    <h2>MY PROJECTS</h2>
                    <div class="row group">
                    <div class="col span_1_of_3">
                        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face" width="250" height="250">
                        <ul class="project-info">
                            <li>Name: Rock</li>
                            <li>Created By: Doe</li>
                            <li>Date: June 2017</li>
                            <li>Language: Java</li>
                            <li><a href="">More Info</a></li>
                        </ul>
                    </div>

                    <div class="col span_1_of_3">
                        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face" width="250" height="250">
                        <ul class="project-info">
                            <li>Name: Player</li>
                            <li>Created By: Doe</li>
                            <li>Date: August 2017</li>
                            <li>Language: Java</li>
                            <li><a href="">More Info</a></li>
                        </ul>
                    </div>

                    <div class="col span_1_of_3">
                        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face" width="250" height="250">
                        <ul class="project-info">
                            <li>Name: Game</li>
                            <br>
                            <li>Created By: Doe</li>
                            <li>Date: August 2017</li>
                            <li>Language: Game Maker Language (GML)</li>
                            <li><a href="">More Info</a></li>


                        </ul>
                    </div>
                    </div>


          <div class="row group">
                    <div class="col span_1_of_3">
                        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face" width="250" height="250">
                        <ul class="project-info">
                            <li>Name: Rock</li>
                            <li>Created By: Doe</li>
                            <li>Date: June 2017</li>
                            <li>Language: Java</li>
                            <li><a href="">More Info</a></li>
                        </ul>
                    </div>

                    <div class="col span_1_of_3">
                        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face" width="250" height="250">
                        <ul class="project-info">
                            <li>Name: Player</li>
                            <li>Created By: Doe</li>
                            <li>Date: August 2017</li>
                            <li>Language: Java</li>
                            <li><a href="">More Info</a></li>
                        </ul>
                    </div>

                    <div class="col span_1_of_3">
                        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face" width="250" height="250">
                        <ul class="project-info">
                            <li>Name: Game</li>
                            <br>
                            <li>Created By: Doe</li>
                            <li>Date: August 2017</li>
                            <li>Language: Game Maker Language (GML)</li>
                            <li><a href="">More Info</a></li>


                        </ul>
                    </div>
                    </div>

                </div>
            </div>


</div>
</section>

另外，如果你想要创意设计 PLS。检查

https://bootsnipp.com/snippets/featured/carousel-extended

相关问题
最新问题