將圖片和文字並排放置在div中

Question

我想放置一張圖片和一些描述它的文字。 這應該是響應性的，即在大屏幕中img和文本應該並排放置，而在小屏幕中則應該從上至下排列。 因此，基本上，在標記之前，它與彼此相鄰的兩個Divs完全相同，然后與響應性更改堆疊在一起

但這是行不通的。

下面是我的代碼：

<!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>

和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{
  }
}

我是個新手，我們將不勝感激。

Answer 1

如果要在視點寬度小於600像素時堆疊第二個div元素（#two），則可以在媒體查詢中添加以下內容：

#one {
   float: none;
}

因此，您的完整媒體查詢是：

@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