将图片和文字并排放置在div中

Question

I want to place an image and some text describing it. 我想放置一张图片和一些描述它的文字。 This should be responsive, ie img and text should be side-by-side in large screen and top-bottom on smaller screen. 这应该是响应性的，即在大屏幕中img和文本应该并排放置，而在小屏幕中则应该从上至下排列。 So, basically, before you tag, its exactly same as Two Divs next to each other, that then stack with responsive change 因此，基本上，在标记之前，它与彼此相邻的两个Divs完全相同，然后与响应性更改堆叠在一起

But this is not working. 但这是行不通的。

Below is my code: 下面是我的代码：

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="groupi">
  <div id="one">
    <img src="hello.jpg" style="width:10vw"/>  </div>
  <div id="two">Hello World</a></div>
</div>
</body>
</html>

and css: 和CSS：

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
}
body {
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
}
.groupi { 
  border : 2px solid #000; 
  overflow:hidden;
}
.gruopi div {
   min-height: 200px;
   padding: 10px;
}
#one {
  float: left;
  padding-top:4vw; 
  margin-left:3vw; 
  margin-right: 1vw; 
  margin-bottom: 5vw; 
  width: 10vw;
  border-right:2px solid #000;
}
#two { 
  background-color: black;
  overflow:hidden;
  margin:1vw;
  border:2vw dashed #ccc;
  min-height:2vw;
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #two{
  }
}

I am very new, and some help will be deeply appreciated. 我是个新手，我们将不胜感激。

Answer 1

If you want your second div element (#two) to stack when your viewpoint is less than 600px wide, you can add the following to your media query: 如果要在视点宽度小于600像素时堆叠第二个div元素（#two），则可以在媒体查询中添加以下内容：

#one {
   float: none;
}

So your full media query is: 因此，您的完整媒体查询是：

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  #one{
    float: none;
  }
}

将图片和文字并排放置在div中

问题描述

1 个解决方案

解决方案1
0 2018-08-17 09:42:27

将图片和文字并排放置在div中

问题描述

1 个解决方案

解决方案1 0 2018-08-17 09:42:27

解决方案1
0 2018-08-17 09:42:27