Question

我有一个div，在普通桌面上看起来还不错。但是，如果是笔记本电脑或更小尺寸，则需要进行一些调整。这就是台式机上的样子。我的目标是扩大文本。我想要做的是将每个部分分别用于较小的设备。文本是如此狭窄，以致于每行只能读取两个或三个单词，这可能会使读者感到烦恼。

这是HTML代码：

  <div id="work" class="full-width">
            <div class="third-width">
                <img src="../img/icon-html.png" alt="HTML icon" />
                <h3>Hand-Coded HTML</h3>
                <p>My focus is writing clean, well formatted, semantic HTML5 by hand to make sure that the content is easy
                    to read, easy to collaborate, trouble-shoot and accessible.</p>
            </div>
            <div class="third-width">
                <img src="../img/icon-css.png" alt="CSS icon" />
                <h3>Well-Organized CSS</h3>
                <p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast
                    to load, and I make it a habit to stay up to date on current best practices.</p>
            </div>
            <div id="code" class="third-width">
                <img src="../img/icon-pencil.png" alt="Pencil icon" />
                <h3>Ease Converting Designs into Code</h3>
                <p>You can trust me to take a designer's PSD and quickly &amp; accurately convert it into a webpage that
                    is pixel-perfect match.</p>
            </div>

        </div>

这是我尝试操作的CSS：

 .third-width .fullwidth {
    display:block; 
    float: none; 



}

现在，当我设法将其居中时，文本非常狭窄，可能是两个或三个单词在一起。我想做的是对第三宽度类进行媒体查询。这是媒体查询：

@media only screen and (min-width: 786px) and (max-width: 1100px) {

.third-width .fullwidth {
    display:block; 
    float: none; 



} }

您如何扩大div以使文本看起来更普通？谢谢大家。

Answer 1

您的CSS代码是错误的，因此无法正常工作。我认为我相信您要完成的工作，最好使用flexbox。

我保留了填充的完整性，但是您可能需要考虑justify-content的其他设置，以允许浏览器计算间距。

.full-width {
  display: flex;
  width: 100%;
  background: orange;
  justify-content: center; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
}

.full-width .third-width {
  padding: 100px;
  width: calc( 100% / 3 );
  text-align: center;
}

@media only screen and (min-width: 786px) and (max-width: 1100px) {
  .full-width .third-width {
    padding: 10px;
  }
}

<div id="work" class="full-width">
  <div class="third-width">
    <img src="https://via.placeholder.com/100x100" alt="HTML icon" />
    <h3>Hand-Coded HTML</h3>
    <p>My focus is writing clean, well formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
  </div>
  <div class="third-width">
    <img src="https://via.placeholder.com/100x100" alt="CSS icon" />
    <h3>Well-Organized CSS</h3>
    <p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
  </div>
  <div id="code" class="third-width">
    <img src="https://via.placeholder.com/100x100" alt="Pencil icon" />
    <h3>Ease Converting Designs into Code</h3>
    <p>You can trust me to take a designer's PSD and quickly &amp; accurately convert it into a webpage that is pixel-perfect match.</p>
  </div>
</div>

Answer 2

尝试这个https://jsfiddle.net/xstb5p0r/3/

.third-width{float:left;width:33.33%;padding:0px 5%;text-align:center;}
.full-width{display:flex;width:100%;}
@media only screen and (max-width: 600px) {
  .full-width {
    display:block;
  }
  .third-width{width:100%;float:none;}
}

是否可以在CSS中的媒体查询中更改div的宽度？

2 个答案: