文字不环绕图像

Question

我使用的是 Hugo 主题，在 css 中，我无法找到一个属性，它不允许我将文字环绕在图像周围。

当我将 css 精简到我想要的时候：

http://jsfiddle.net/d7cLxbs0/10/

有效。

我需要另一双眼睛，因为我看不到我不知道我在寻找什么。

编辑。

我已经包含了我的 css 当前状态的演示。

http://jsfiddle.net/obpjh4em/9/

    * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    background-color: #39424E;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px
}

body {
    font-size: 16px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    line-height: 2rem;
    font-weight: 300;
    letter-spacing: 1.5px;
    text-shadow: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 1
}

h1,
h2,
h3 {
    margin-bottom: 0.5em;
    text-align: center;
    color: #fff;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    border-bottom: 1px solid #f2ca48;
    /* opacity: 0.6 */
}

li {
    list-style-type: none;
    opacity: 0.8
}

li a {
    opacity: 0.9
}

p {
    display: inline;
    /* opacity: 0.8 */
}

a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1.75px solid #f2ca48;
    /* -webkit-transition: .5s ease;
    transition: .5s ease */
}

a:hover {
    color: #f2ca48;
    font-style: none
}

a:active {
    color: #ccc
}

button {
    padding: 20px;
    border: 0px;
    border-radius: 5px;
    background: #fff
}

button:hover {
    -webkit-box-shadow: 5px 5px #111;
    box-shadow: 5px 5px #111
}

hr {
    margin: 1rem 0;
    /* background-color: transparent; */
    width: 50%;
    border-style: solid;
    color: #f2ca48;
    border-width: 1px;
    opacity: 0.6
}

.wrap {
    margin: 0 auto;
    margin-top: 6rem;
    width: 55%
}

.firstcharacter {
  color: #f2ca48;
  /* float: left; */
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 6rem;
  line-height: 45px;
  padding-top: 15px;
  padding-right: 8px;
  padding-left: 3px;
}

form {
    padding-bottom: 12px;
}

article form {
    margin-bottom: 24px;
}

input,
button {
    border-radius: 0;
    border: none;
    outline: none;
    background: #fff;
    font: 300 16px/1.4 "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 12px;
    box-sizing: border-box;
    cursor: pointer;
    width: 38%;
    vertical-align: middle;
}

input {
    background: #f5f5f5;
    margin-bottom: 4px;
    color: #222;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-left: 4px solid #f2ca48;
    margin: 0;
    transition: ease all .4s;
}

button {
    background: #f9415d;
    color: #fff;
    font-weight: 400;
    transition: ease all .4s;
}

button:hover {
    background: #222;
}

.left {
    margin-bottom: 1em;
    line-height: 1.8;
    letter-spacing: 2px;
    /* opacity: 0.8; */
    /* z-index: 1; */
}

.right {
    max-width: 50%;
    /* margin-right: 50px; */
    /* max-height: 100%; */
    margin: 1rem auto;
    float: right;
    /* opacity: 1; */
    position: relative;
    display: inline-block; 
}

@media screen and (max-width: 960px) {
    .wrap {
        padding: 1rem;
        width: 100%
    }
}

.tag {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: transparent;
    position: relative;
    bottom: 0
}

.section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.bottom-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    font-weight: 300;
    align-items: center;
    padding-top: 3rem;
    text-align: center;
}

.footer {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    background-color: transparent;
    position: relative;
    font-weight: 300;
    bottom: 0;
    padding: 2rem 1rem;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1em;
    opacity: 0.8
}

.footer a {
    border-bottom: none
}

#copyright {
    width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
background-color: transparent;
position: relative;
font-weight: 300;
text-decoration: none;
letter-spacing: 1.5px;
bottom: 0;
padding: 0 0 2rem;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1em;
opacity: 0.8;
}

#splash {
    margin: auto 0;
    height: 100vh;
    width: 55%;
    overflow: hidden
}

@media screen and (max-width: 736px) {
    #splash {
        width: 90%
    }
}

#big-link {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3rem;
    font-weight: 300;
    margin-bottom: 2rem;
    line-height: 1.5em
}

#title {
    margin-top: 3rem;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 300;
    border-bottom: 1px solid #f2ca48;
    margin-bottom: 2rem
}

#content {
    margin: 2rem 0;
    line-height: 2em;
    letter-spacing: 2px;
    font-weight: 300;
}

#content h1,
#content h2,
#content h3 {
    margin: 1em 0em;
    text-align: left
}

#content p {
    margin-bottom: 1em;
    line-height: 1.8;
    letter-spacing: 2px;
    opacity: 0.8;
}

#content pre {
    line-height: 2rem;
    border-radius: 2px;
    background-color: #4f5b6b;
    padding: 1rem;
    max-width: 100%;
    overflow-x: scroll
}

#content pre>code {
    border: none
}

#content code {
    font-size: 0.9rem;
    font-family: 'Source Code Pro', monospace;
    background-color: #4f5b6b;
    padding: 0.2rem;
    border-radius: 2px
}

#content img {
    width: 100%;
    /* max-width: 100%; */
    display: block;
    /* margin: 2rem auto; */
    opacity: 1
}

#content blockquote {
     background-color: rgba(204, 204, 204, 0.152); 
    color: #ccc;
    font-size: 21px;
    padding: 1rem;
    margin: 2rem 1rem 2rem 1rem;
    font-style: italic;
    border-radius: 2px
}

#content blockquote ul {
    margin-top: 1rem
}

#content blockquote li {
    list-style: disc
}

#content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    overflow-x: auto
}

#content table th {
    font-size: 0.9rem
}

#content table td,
#content table th {
    padding: 2px 5px;
    text-align: center;
    border: 1px solid #ccc
}

#content li {
    /* list-style: inside; */
    margin-left: 1rem;
    line-height: 2
}

#content li:last-child {
    margin-bottom: 1rem
}

#tag {
    padding: 0.25em 0em;
    margin-right: 0.5em;
    opacity: 0.6
}

.grid {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-auto-rows: 400px
}

@media screen and (max-width: 736px) {
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(100%, 1fr))
    }
}

.grid>div {
    background-color: transparent;
}

.grid>div>img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 1
}

.grid>div>a>img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: 1
}

.go-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.go-right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.go-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

Answer 1

好了

body {
  padding: 2em;
  background: white;
}

.left {
  margin-bottom: 1em;
  line-height: 1.8;
  letter-spacing: 2px;
  opacity: 0.8;
  /* z-index: 1; */
}

.right {
  max-width: 50%;
  /* margin-right: 50px; */
  /* max-height: 100%; */
  margin: 2rem auto;
  margin-bottom:420px;
  float: right;
  /* opacity: 1; */
  /* position: absolute; */
  display: inline-block; 
}
.wrap{
  margin-bottom: 1em;
  line-height: 1.8;
  letter-spacing: 2px;
  opacity: 0.8;
  /* z-index: 1; */
}

<img class="right" alt="Sample Photo" src="http://placehold.it/200x200/" />

<div class="left">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consectetur aliquam convallis. Pellentesque id vestibulum nibh.
  Nulla eu neque lobortis, luctus sapien sed, ultrices justo.
  <br> Aenean at erat at felis.
  <br>
  <br>
  <div class='wrap'>
    Nullam ultricies egestas imperdiet. Nullam nec pharetra ante. Morbi mi neque, commodo vel sodales a, facilisis et tortor.
    Aenean fringilla lorem a quam ullamcorper rutrum. Maecenas eu porta ante, ac tincidunt lectus. Etiam vel hendrerit ipsum,
    ut posuere metus. Quisque id scelerisque odio, nec egestas nunc. Donec enim purus, lacinia nec faucibus at, congue pretium
    erat. Suspendisse ac mollis dolor. Curabitur tempor semper nunc, vel semper orci aliquet sed. Cras nec dui sodales, faucibus
    justo vel, molestie purus...
  </div>
</div>

Answer 2

溢出：隐藏导致此问题。

从这里删除它：

.grid>div {
    background-color: transparent;
    overflow: hidden //remove this
}

Answer 3

演示中的问题是 body 是 flex。从代码中删除这些行：

display: -webkit-box;
display: -ms-flexbox;
display: flex;

问题就解决了。

http://jsfiddle.net/obpjh4em/12/

文字不环绕图像

Text does not wrap around image

css

hugo