文字不环绕图像

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 是flex。从代码中删除这些行：

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

问题就解决了。

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

Answer 2

溢出：隐藏导致此问题。

从这里删除它：

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

Answer 3

你来了

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>