HTML/CSS - 如何将我的图片放在右边，以便它可以与左边的文字对齐？

Question

我是 HTML 和 CSS 的新手，尝试编写代码时出现了一些问题。我想要的是

文字（左中）和图片（右中）并排
响应式设计 - 文字在上，图片在下

这是问题，

如何将我的图片放在右边，以便它可以与左边的文字对齐？
文字和图片似乎都向下倾斜了。
当我调整浏览器大小时，文本和图像没有响应，一切都崩溃了，我该如何解决？

非常感谢！

.first_section {
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg');
    background-position:center top;
    background-size: cover;
    padding: 200px 150px;
    margin: 0 30px;
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif';
}

#first_section_text {
    float: left;
    text-align: left; /*Set everything to the left */
    display: block;
    width: 50%;
}

#first_section_image {
    float: right;   /* float property can be used to wrap text around images */  
    width: 50%;
    height: 50%;
    display: block;
}

        <div class="first_section">

            <div id="first_section_text">
                <p>IT'S OFFICIALLY SANDWICHES SEASON</p>
                <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p>
                <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a>
            </div>

            <div id="first_section_image">
                <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/>
            </div>           

        </div>

Answer 1

请参阅下面的代码段或在此处 fiddle > jsfiddle

第一。 .first_section 上的填充是错误的。这就是为什么您的内容定位如此之低，正如您所说：Both text and image seems to have skewed downward.

秒。在 .first_section 上使用 float:left; 和 width，这样它将继承其内容的高度。

我将 width:90% 与 margin:0 5% 一起使用，因为我看到你想要左右边距。

然后将文字放在上面，图片放在文字下面，当屏幕变小时，使用media queries。对于小于 640px 的屏幕尺寸，我使用了 media query 。但这只是一个例子，你想怎么改就怎么改。

在该媒体查询中将 width:100% 添加到文本和图像中，这样它们就会一个接一个地保留下来。

如果有帮助请告诉我

.first_section {
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg');
    background-position:center top;
    background-size: cover;
    float:left;
    width:90%;
    margin: 0 5%;
    padding:15px;
    box-sizing:border-box;
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif';
}

#first_section_text {
    float: left;
    text-align: left; /*Set everything to the left */
    display: block;
    width: 50%;
}

#first_section_image {
    float: right;   /* float property can be used to wrap text around images */  
    width: 50%;
    height: 50%;
    display: block;
}

@media only screen and (max-width: 640px) {
 #first_section_image  { float:left;width:100%;}
 #first_section_text{ float:left;width:100%;}

}

<div class="first_section">

            <div id="first_section_text">
                <p>IT'S OFFICIALLY SANDWICHES SEASON</p>
                <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p>
                <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a>
            </div>

            <div id="first_section_image">
                <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/>
            </div>           

        </div>

Answer 2

.first_section {
    background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg');
    background-position:center top;
    background-size: cover;
    padding: 200px 150px;
    margin: 0 30px;
    font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif';
}

#first_section_text {
    float: left;
    text-align: left; /*Set everything to the left */
    display: block;
    width: 50%;
}

#first_section_image {
    float: right;   /* float property can be used to wrap text around images */  
    width: 50%;
    height: 50%;
    display: block;
}

@media screen and (max-width: 600px) {
  
#first_section_text
  , #first_section_image{
    width: 100%;
    float: left;
  }
}

<div class="first_section">

            <div id="first_section_text">
                <p>IT'S OFFICIALLY SANDWICHES SEASON</p>
                <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p>
                <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a>
            </div>

            <div id="first_section_image">
                <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/>
            </div>           

        </div>

Answer 3

请检查以下代码。我已经使用了您的标记和 css，只是对其进行了修改。您的目标是先显示图像，然后在移动视图中显示文本，因此为了管理，我先添加图像，然后在标记中添加文本，然后在 css 中向它们添加浮点数。在移动视图中，删除浮动，这样图像将显示第一个，然后显示文本内容。试试这个解决方案:)

.first_section {
  background-image:url('http://i347.photobucket.com/albums/p462/jimprince1990/zinc-white_zpsiibjtmdi.jpg');
  background-position:center top;
  background-size: cover;
  height:300px;
  margin: 0 30px;
  padding:100px 20px;
  font-family: 'Trebuchet MS', 'Helvetica', 'sans-serif';
}

#first_section_text {
  float: left;
  text-align: left; /*Set everything to the left */
  display: block;
  width: 50%;
}

#first_section_image {
  float: right;   /* float property can be used to wrap text around images */  
  width: 50%;
  display: block;
}

@media (max-width:480px){
  #first_section_image{
    float:none;
    width:100%;
    text-align:center;
    }
  #first_section_text{
    float:none;
    width:100%;
    text-align:center;
    }
}

<div class="first_section">
  <div id="first_section_image">
    <img src="http://i347.photobucket.com/albums/p462/jimprince1990/Sandwiches_zps99hlhkod.jpg" height= "235" width= "235"/>
  </div>           
  <div id="first_section_text">
    <p>IT'S OFFICIALLY SANDWICHES SEASON</p>
    <p>This summer, we've got more sandwiches options than ever. From the new mexican style to our classic chicken and beef sandwich, there's a style to fill you up on any hot day.</p>
    <a href="navigation_bar/sub_menu/sandwiches.html">Explore now!</a>
  </div>
</div>

HTML/CSS - 如何将我的图片放在右边，以便它可以与左边的文字对齐？

HTML/CSS - How to position my image to the right so that it can be aligned with my text on the left?

html

css

responsive