如何使文本环绕图像？ [英] How do I make the text wrap around the image?

问题描述

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

I am designing a blog and I am using CarrierWave and MiniMagic for image file upload. As of now, each article displays a picture at its top. I first tried to resize the picture to a rectangular shape but it seems that even when I change the dimensions under resize, the picture is always displayed as a square. Now, I am trying to wrap the text around the image. More specifically, I want the the image to be displayed at the top-left of the article and the text to be on the right of the image and under the image :

-IMAGE ---- ----- TEXT -------

-IMAGE---- -----TEXT-------

这是我的文章索引视图：

Here is my articles index view :

<%= 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做到这一点？

How do I get the image to be at the top left, the text at the top right, bottom left and bottom right of the page such that the text wraps around the image ? Is it possible to resize the image with a rectangular shape ? How do I do that with CarrierWave ?

推荐答案

如果图像位于 p 标记你只需浮动它就在左边。

If the image is in a p tag you just float it to the left.

CSS

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

我做了一个 JSFiddle 为您服务。

这篇关于如何使文本环绕图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！