如何使文本环绕图像？

Question

我正在设计一个博客，我正在使用 CarrierWave 和 MiniMagic 进行图像文件上传。截至目前，每篇文章的顶部都会显示一张图片。我首先尝试将图片调整为矩形，但似乎即使我在调整大小下更改尺寸，图片始终显示为正方形。 现在，我正在尝试将文本环绕在图像周围。更具体地说，我希望图像显示在文章的左上角，文本显示在图像的右侧和图像下方：

-IMAGE---- -----文字------

---

---

---------文本--------------

---

这是我的文章索引视图：

<%= will_paginate %>
 <% @articles.each do |article| %>
 <div class="container1">
 <h4><%= link_to article.title, article_path(article) %></h4>
 <%= image_tag article.picture.url if article.picture? %>
 <p>
 <%= article.body %></p>
 <p><small><strong> Date:</strong> <%= article.created_at.to_s %></p></small>
 </p>
 </div>
 <br>
 <br>
 <% end %>
 <%= will_paginate %>
 <h6>
 <% if logged_in? %>
 <%= link_to "Create a New Article", new_article_path, class: "new_article" %>
 <% end %>
 </h6>

这是我的 CSS 样式：

@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables */
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
position: relative;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #3BB9FF;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* 
footer{
background-color: #222;
div ul li{
display:block;
vertical-align: top;
width: 50%;
float: left;
}
}
*/
@mixin box_sizing {
-moz-box-sizing:    border-box;
-webkit-box-sizing: border-box;
box-sizing:         border-box;
}
/* miscellaneous */
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
@extend .has-error;
.form-control {
color: $state-danger-text;
}
}
/* articles */
.container1 {
opacity: 0.75;
border: 1px solid #000000;
border-radius: 10px;
padding: 30px 75px 75px 100px;
overflow: scroll ;
 }
 .container2 {
 position: fixed;
 padding: 0px 75px 20px 100px;
 clear: both;
 background-color: #FFFFFF; /*#F8F8F8;*/
 border-radius: 5px;
 overflow: scroll;
 }

这是我的文件上传器：

class PictureUploader < CarrierWave::Uploader::Base
# Include RMagick or MiniMagick support:
 # include CarrierWave::RMagick
 # include CarrierWave::MiniMagick
 # Choose what kind of storage to use for this uploader:
 storage :file
 # storage :fog
 include CarrierWave::MiniMagick
 process resize_to_limit: [660, 660]
 if Rails.env.production?
 storage :fog
 else
 storage :file
 end
 # Override the directory where uploaded files will be stored.
 # This is a sensible default for uploaders that are meant to be mounted:
 def store_dir
 "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name,        "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end
  # Process files as they are uploaded:
  # process :scale => [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end
  # Create different versions of your uploaded files:
  # version :thumb do
  #   process :resize_to_fit => [50, 50]
  # end
  #Add a white list of extensions which are allowed to be uploaded.
  #For images you might use something like this:
  def extension_white_list
  %w(jpg jpeg gif png)
  end
  #Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  # def filename
  #"something.jpg" if original_filename
  #end
  end.

如何使图像位于页面的左上角，文本位于页面的右上角、左下角和右下角，以使文本环绕图像？是否可以用矩形调整图像的大小？如何使用 CarrierWave 做到这一点？

Answer 1

如果图像在p 标记中，您只需将float 放在左侧即可。

CSS

.container1 p img {
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
}

我为你做了一个JSFiddle。