Question

有人可以帮助我，由于某些原因我无法让img和p标签相互靠近。我必须遗漏一些非常简单的东西，谢谢你的帮助。

.sec03 {
  border-radius: 20px;
  margin-bottom: 20px;
  background-color: darkgrey;
  height: 20%;
  width: 100%;
  position: relative;
  display: inline-block;
}
.img02 {
  height: 80%;
  width: auto;
  padding: 0;
  margin: 0;
  position: relative;
  float: left;
  background-color: #333;
  display: inline-block;
  margin-top: 20px;
}
.text01 {
  position: relative;
  float: left;
  color: black;
  padding: 0;
  margin: 0;
  background-color: white;
  margin-top: 20px;
  height: 80%;
  display: inline-block;
}

<div class="sec03">
  <img class="img02" src="images/landscape.png">
  <p class="text01">On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone him his dear sure.
    Fat decisively estimating affronting assistance not.</p>
</div>

Answer 1

你应该

从所有三个类中删除display: inline-block。
从float: left

.text01

将overflow: hidden添加到文字
您可能希望为图片添加marrgin-right

Answer 2

你想要这样的东西吗？ https://jsfiddle.net/uft4vaoc/10/

为段落和#!/bin/bash myprocess & # Store myprocess PID MYPROCESS_PID="$!" # ... Do your stuff here .... # Wait until myprocess returns wait "${MYPROCESS_PID}" # Store myprocess exit status (returned by wait) $ret="$?" if [ "${ret}" -gt 0 ]; then echo "Myprocess didn't exited with EXIT_SUCCESS" fi

添加宽度

background-color: transparent

HTML CSS浮动不起作用

2 个答案: