Question

当我的网站全屏显示时，四张图片以水平线显示。但是，当窗口变小时，最后一张图片会折叠到下一行。无论窗口大小如何，我希望所有图片都保持水平线。有什么建议吗？

我的代码：

body {
    font-size: 1.5rem;
    margin: 0;
    display: inline-block;
    list-style-type: none;
    position: relative;
    width: 100%;
    background-color: #d5e0e8;
}

img {
    padding: 2px;
}

h1 {
    text-align:center;
    padding: 20px;
    font-family: 'Oswald', sans-serif;
}

h2 {
    text-align: center;
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    background-color: #a2b5c1;
    }
    h3{
    text-align: center;
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    background-color: #a2b5c1;
}

h4 {
    text-align: center;
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    background-color: #a2b5c1;
}

ul {
    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 25px;
    background-color: #6e95ad;
    margin: 25px;
}

p {
    text-align: center;
    font-size: 25px;
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #6e95ad;
    margin: 25px;
}

p1 {
    margin: 525;
    font-family: 'Open Sans Condensed', sans-serif;
}

<html>
        
    <img src="making%20a%20scene.jpg">
    <img src="sbsn.jpg">
    <img src="mvp.jpg">
    <img src="kevin.jpg">

    <head>
        <link rel="stylesheet" href="styles.css" >
        <link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
        
        <title> My Job </title>
    </head>
    
    <body>
    
        <div style="visibility: hidden; height: 0; width: 0">
        </div>
        
        <div>
            <h1> ... ENTERTAINMENT </h1>

            <h2 class="display-3"> Who We Are </h2>

            <p class="lead"> ...is a television production and development company located in S..., California. We create content for television and digital sites such as The History Channel, TLC, Netflix, Discovery, YouTube Red, and many more.

            INE was founded by ... and .... These exectives are responsible for creating shows such as The Office (US), The Biggest Loser, Masterchef, Real Housewives of Orange County, Tabatha‘s Salon Takeover, and several others. </p>

            <p1> <a href="https://www.entertainment.com"> ...Entertainment Sizzle Reel </a> </p1>
        </div>
 
        <div>
            
            <h3> My Role </h3>

            <p> In the summer of 2017, I was hired as a Development Research Associate after working for three months as an intern for .... My role as a research associate varies each work day. My duties include finding and contacting potential talent for digital and reality series, writing and organizing television pitches for networks, deck design, cold-calling experts, and exectuive assitance to ... and .... </p>

        </div>  
        <!-- They are very scary. -->
    
        <span> 
            <h4> Employment Hightlights </h4>
            <ul>
                <li> Transcripting broadcast scripts for <i> Making a Scene with   James Franco </i></li>
                <li> &#36; &#36; &#36; </li>
                <li> Acting as Production Assistant for <i> MVP </i> starring Rob Gronkowski, Andre Ward, Terell Owens, and Julius Randall at CBS Studios</li>
                <li><s> Free Lunch </s></li>
                <li> My roommate was named Morgan Freeman. </li> 
            </ul>
        </span>

    </body>

</html>

Answer 1

我猜您正在搜索CSS white-space: nowrap。结果是一条线永远不会破裂。

HTML

<div class="nowrap">
  <img src="making%20a%20scene.jpg">
  <img src="sbsn.jpg">
  <img src="mvp.jpg">
  <img src="kevin.jpg">
</div>

CSS

.nowrap {
    white-space: nowrap;
}

演示： https://jsfiddle.net/2yxcz34d/1/

您可以使用CSS overflow: hidden;或overflow: visible;进一步控制.nowrap容器的行为。

Answer 2

所以我有这个适合你，但首先要注意的是你需要删除HTML标签到最顶层。它应该在身体之前。对于这个问题，我把它移到了顶部并将其他所有内容放在标签内。用于应该出现在身体中的标题。

工作示例：https://codepen.io/anon/pen/LzZpbe

在HTML中，我将图像包装在一个div中，并为其提供了“gallery-container”类，并将每个图像包装在一个div中，并给它一个“gal-image”。

<强> HTML

<div class="gallery-container">
  <div class="gal-image">
  <img src="https://i.sdlcdn.com/img/product/descimg/SDL008306056_2.jpg">
  </div>

  <div class="gal-image">
  <img src="https://images-na.ssl-images-amazon.com/images/I/71GTFDd4KiL._SX355_.jpg">
  </div>
  <div class="gal-image">
  <img src="http://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c03815648.png">
  </div>
  <div class="gal-image">
  <img src="https://assets.logitech.com/assets/65057/k840-mechanical-pdp.png">
  </div>
</div><!-- END GALLERY CONTAINER -->

对于CSS，我给.gallery容器宽度为100％，.gal-image宽度为25％。这样可以确保图像始终为总库容容量宽度（100％）的25％，因此所有4个图像将始终并排显示。我给你的图像填充了2px的右边以将它们分开2px，但是给最后一个图像填充右边的0，所以它不会将容器推到我的2px并导致水平滚动条。

<强> CSS

img{
  padding-right:2px;
  max-width:100%;
}

img:last-of-type{
  padding-right:0px;
}

.gallery-container{
   width:100%;
}

.gal-image{
  width:25%;
  float:left;
}

尽管窗口大小，保持照片不被包装？

2 个答案: