Question

我希望能够在左侧放置图像，在右侧放置文本。我怎样才能做到这一点？此外，如果图像太大，我该如何调整大小？

＆＃13;

.container {
  background: #34618c;
  border-radius: 25px;
}
h1 {
  font-family: consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}
p {
  font-family: Consolas;
  border: 2px solid #73AD21;
  border-radius: 25px;
}

＆＃13;

<img src="c:\users\user\Desktop\test.png" align="left">
<div class="container">
  <h1>Hello</h1>
  <p>World</p>
</div>

＆＃13;

我在左侧看到一张图片，但我只希望图片周围的边框不在图片周围。

Answer 1

img {
  width : 20%;
}

.container{
background: #34618c;
border-radius: 25px;
width : 80%;
float : right;
}
h1{
 font-family: consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}
p{
font-family: Consolas;
border: 2px solid #73AD21;
border-radius: 25px;

}

<img src="http://placehold.it/350x150">
<div class="container">
<h1>Hello</h1>
<p>World</p>
</div>

喜欢这个吗？

Answer 2

很多很多方式可以实现这一目标。太多列出所有这些。不过我建议使用像Bootstrap这样的框架，因为这样可以帮助您在整个网页上获得良好且一致的结果。

其中一个Bootstraps＆＃39;许多功能是Grid System，它有助于布置您的设计。

网格系统用于通过一系列容纳内容的行和列来创建页面布局。

基本上，Bootstrap提供了某些类，可以让你定义＆＃34;行＆＃34;和＆＃34;列＆＃34;你的布局。每行的总列宽应等于12.这意味着您只能有一个列宽为12的列;每列2列，列宽为6; 3列，宽度为4，依此类推。

对于您的特定情况，您的行似乎需要2列。一个用于放置图像，一个用于容器。这是布局：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">  <-- column with "6" width
      //image goes here
    </div>
    <div class="col-md-6">  <-- column with "6" width
      //container goes here
    </div>
  </div>
</div>

每个<div>在这里所做的事情从他们拥有的类名中非常明显。每个col-md-6都是我们的2列之一。 6表示宽度为6/12（宽度的一半）。 md是中型设备的断点。基本上，如果您正在查看此页面的设备被归类为＆＃34;中等规模＆＃34;或更大，它将具有6列宽 - 否则为12.您可以通过缩小浏览器窗口（demo）来查看这实际意味着什么。如果您希望内容更快地中断，请将md替换为lg（大）;如果您希望在更小的设备上发生中断，请使用sm（小）或xs（超小）。

您的应用的完整代码可以在this fiddle或下面的演示中找到：

＆＃13;

.my_container {
  position: relative;
  height: 200px;
}
.my_container div {
  background: #34618c;
  border-radius: 25px;
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
  width: 100%;
  border: 2px solid #73AD21;
  border-radius: 25px;
  padding: 10px;
}
.my_container h1,
.my_container p {
  margin: 0;
  font-family: consolas;
}
.my_image {
  width: 100%;
  height: 200px;
  background-size: cover;
  background-position: 50%, 50%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="my_image" style="background-image: url('http://placehold.it/300x200')"></div>
    </div>
    <div class="col-md-6">
      <div class="my_container">
        <div>
          <h1>Hello</h1>
          <p>World</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

再次，请检查Bootstrap documentation，不要忘记将库包含在项目中。祝你好运！

如何将图像文件放在左侧，将文本放在右侧

2 个答案: