Question

我刚才开始使用HTML和CSS，所以我是新手。无论如何..我在左侧有一张图片，我需要在右侧添加文字 - 没问题，但是当我尝试添加另一个文本时，文本是浮动的，但它在图片下面。知道怎么解决这个问题吗？

HTML

<div class="page">
 <div class="info1">
  <img src="pictures/lepohar.jpg" alt="" width="500px;">
      <p class="txt1"><br />Text text text<br />Text text text</p>
      <p class="help">More...</p>
 </div>
</div>

CSS

.txt1 {
    font-size:26px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    float:right;
    transition:0.3s;
    color:royalblue;
    display:inline-block;
}
.help {
    margin-right:40px;
    font-size:26px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:royalblue;
    padding:10px 16px;
    border: 2px solid cornflowerblue;
    border-radius: 6px;
    vertical-align:middle;
    float:right;
}
.txt1:hover {
    color:cornflowerblue;
}
.info1 {
    display:inline-block;
    vertical-align:bottom;
    padding:5px;
    position:relative;
}
.page {
    border:none;
    max-width:1080px;
    margin:auto;
    background-color:white;
    color:white;
    position:relative;
}

- 我被困在这几个小时。如果这个问题已经回答我很抱歉，但我没有找到它......

Answer 1

将一个包装器添加到Text Section中;

.content-wrapper {
  float: right;
}

并在你的css文件中将包装器浮动到左边;

<div class="page">
  <div class="info1">
    <img src="pictures/lepohar.jpg" alt="" width="500px;">
    <div class="content-wrapper">
      <p class="txt1">
        <br />Text text text
        <br />Text text text</p>
      <br>
      <p class="help">More...</p>
    </div>
  </div>
</div>

这应解决您的问题，使用不同的容器将文本与图像分开。

编辑最终代码：

HTML：

.txt1 {
  font-size: 26px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  float: left;
  transition: 0.3s;
  color: royalblue;
  display: inline-block;
}

.help {
  margin-right: 40px;
  font-size: 26px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: royalblue;
  padding: 10px 16px;
  border: 2px solid cornflowerblue;
  border-radius: 6px;
  vertical-align: middle;
  float: right;
}

.txt1:hover {
  color: cornflowerblue;
}

.info1 {
  display: inline-block;
  vertical-align: bottom;
  padding: 5px;
  position: relative;
}

.page {
  border: none;
  max-width: 1080px;
  margin: auto;
  background-color: white;
  color: white;
  position: relative;
}

.content-wrapper {
  float: right;
}

CSS：

{{1}}

Answer 2

如果您需要居中，请确保您有一个父母（包装）为您的孩子占据中心位置。

CSS：

.centered {
  display: inline-block;
    text-align: center;
}

HTML：

<div class="centered">
  <p class="txt1">
    <br />Text text text Text text text Text text text
    <br />Text text text Text text text Text text text
  </p>
  <p class="help">More...</p>
</div>

＆＃13;

.txt1 {
  font-size: 26px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  transition: 0.3s;
  color: royalblue;
}

.help {
  margin-right: 40px;
  font-size: 26px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: royalblue;
  padding: 10px 16px;
  border: 2px solid cornflowerblue;
  border-radius: 6px;
  display: inline-block;
}

.txt1:hover {
  color: cornflowerblue;
}

.info1 {
  display: inline-block;
  vertical-align: bottom;
  padding: 5px;
  position: relative;
}

.centered {
  display: inline-block;
	text-align: center;
}

.page {
  border: none;
  max-width: 1080px;
  margin: auto;
  background-color: white;
  color: white;
  position: relative;
}

＆＃13;

<div class="page">
  <div class="info1">
    <img src="http://placehold.it/500x250" alt="" width="500px;">
    <div class="centered">
      <p class="txt1">
        <br />Text text text Text text text Text text text
        <br />Text text text Text text text Text text text
      </p>
      <p class="help">More...</p>
    </div>
  </div>
</div>

＆＃13;

文字浮动正确，但它在img下面

2 个答案: