如何在它们之间添加空格并使文本保持同一行

时间：2018-07-02 02:03:31

标签： css text noop

如何在这两个图像之间添加一个空格，并且不允许文本在页面中央中断？这是一个大学项目，我以前从未编程过。 我实际上不知道该模板上发生了什么事，我必须编辑..我只需要在图像圈中添加一个人的照片（我知道该怎么做）和他们的评论文字，但是图像一直不显示位置和文字在中间。 enter image description here 

/*
	Horizons by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/

@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900");

/* Basic */


}
body {
  background: #222833;
}
body,
input,
select,
textarea {
  color: #555555;
  font-family: 'Raleway', sans-serif;
  font-size: 13pt;
  font-weight: 300;
  line-height: 1.75em;
}
a {
  color: #3ac984;
  text-decoration: underline;
}
a:hover {
  text-decoration: none;
}
strong,
b {
  font-weight: 700;
}
em,
i {
  font-style: italic;
}
p,
ul,
ol,
dl,
table,
blockquote {
  margin: 0 0 2em 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-weight: 700;
  line-height: 1.75em;
  margin-bottom: 1em;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  text-decoration: none;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.25em;
}
sub {
  font-size: 0.8em;
  position: relative;
  top: 0.5em;
}
sup {
  font-size: 0.8em;
  position: relative;
  top: -0.5em;
}
hr {
  border-top: solid 1px #888888;
  border: 0;
  margin-bottom: 1.5em;
}
blockquote {
  border-left: solid 0.5em #888888;
  font-style: italic;
  padding: 1em 0 1em 2em;
}
section.special,
article.special {
  text-align: center;
}
header.major {
  padding-bottom: 4em;
}
header h2 {
  margin: 0;
  padding: 0;
  font-size: 3em;
  font-weight: 600;
}
header .byline {
  font-size: 1.6em;
}
footer> :last-child {
  margin-bottom: 0;
}
footer.major {
  padding-top: 3em;
}

/* Form */
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: none;
  border: solid 1px #888888;
  color: inherit;
  display: block;
  outline: 0;
  padding: 0.75em;
  text-decoration: none;
  width: 100%;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: #3ac984;
}
input[type="text"],
input[type="password"],
input[type="email"] {
  line-height: 1em;
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.5;
  position: relative;
  top: 3px;
}
:-moz-placeholder {
  color: inherit;
  opacity: 0.5;
}
::-moz-placeholder {
  color: inherit;
  opacity: 0.5;
}
:-ms-input-placeholder {
  color: inherit;
  opacity: 0.5;
}
.formerize-placeholder {
  color: rgba(85, 85, 85, 0.5) !important;
}

/* Image */
.image {
  border: 0;
  position: relative;
}
.image.fit {
  display: block;
}
.image.fit img {
  display: block;
  width: 100%;
}
.image.feature {
  display: block;
  margin: 0 0 2em 0;
}
.image.feature img {
  display: block;
  width: 100%;
}
.image.feature2 {
  display: block;
  margin: 0 0 5em 0;
}
.image.feature2 img {
  display: block;
  width: 100%;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  float: left margin 40px;
}

/* Icon */
.icon {
  position: relative;
}
.icon:before {
  content: "";
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}
.icon>.label {
  display: none;
}

/* Lists */
ol.default {
  list-style: decimal;
  padding-left: 1.25em;
}
ol.default li {
  padding-left: 0.25em;
}
ul {
  margin: 0;
  padding: 0;
}
ul.default {
  list-style: none;
}
ul.default li {
  display: block;
  padding: 0.60em 0;
  border-top: 1px solid;
  border-color: rgba(192, 192, 192, 0.15);
}
ul.default> :first-child {
  padding-top: 0;
  border-top: none;
}
ul.icons {
  cursor: default;
}
ul.icons li {
  display: inline-block;
  line-height: 1em;
  padding-left: 0.5em;
}
ul.icons li:first-child {
  padding-left: 0;
}
ul.actions {
  cursor: default;
}
ul.actions:last-child {
  margin-bottom: 0;
}
ul.actions li {
  display: inline-block;
  padding: 0 0 0 1.5em;
}
ul.actions li:first-child {
  padding: 0;
}
ul.actions.vertical li {
  display: block;
  padding: 1.5em 0 0 0;
}
ul.actions.vertical li:first-child {
  padding: 0;
}
ul.contact li {
  padding: 1.05em 0;
  border-top: 1px solid;
  border-color: rgba(192, 192, 192, 0.15);
}
ul.contact li>span {
  display: inline-block;
}
ul.contact li .address,
ul.contact li .mail,
ul.contact li .phone {
  float: left;
  width: 100px;
  font-weight: 600;
}
ul.contact> :first-child {
  padding-top: 0;
  border-top: none;
}
ul.style li {
  clear: both;
  display: block;
  padding-top: 3em;
}
ul.style> :first-child {
  padding-top: 0;
}
ul.style h3 {
  display: block;
  margin: 0;
  padding-bottom: 0.50em;
  font-size: 1.1em;
  font-weight: 700;
  color: #404040;
}
ul.style .fa {
  float: left;
  display: inline-block;
  width: 80px;
  height: 80px;
  margin-right: 1em;
  background: #3ac984;
  line-height: 80px;
  text-align: center;
  border-radius: 10px;
  font-size: 2em;
  color: white;
}
ul.list {
  list-style: none;
}
ul.list li {
  display: block;
  padding: 0.60em 0;
  border-top: 1px solid;
  border-color: red;
}
ul.list> :first-child {
  padding-top: 0;
  border-top: none;
}

/* Tables */
table {
  width: 100%;
}
table.default {
  width: 100%;
}
table.default tbody tr {
  border-bottom: solid 1px #888888;
}
table.default td {
  padding: 0.5em 1em 0.5em 1em;
}
table.default th {
  font-weight: 700;
  padding: 0.5em 1em 0.5em 1em;
  text-align: left;
}
table.default thead {
  background: #555555;
  color: #fff;
}

/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out;
  -o-transition: background-color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
  background: #3ac984;
  border-radius: 40px;
  border: 0;
  color: white;
  cursor: pointer;
  display: inline-block;
  padding: 0.80em 2em;
  text-align: center;
  text-decoration: none;
  font-size: 1.4em;
  font-weight: 600;
  min-width: 10em;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
  background-color: #32b777;
}
input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit,
.button.fit {
  width: 100%;
}
input[type="submit"].small,
input[type="reset"].small,
input[type="button"].small,
.button.small {
  font-size: 0.8em;
}

/* Wrapper */
.wrapper.style1 {
  background: #fff;
}
.wrapper.style2 {
  background: #ececec;
  padding: 6em 0;
  text-align: center;
}
.wrapper.style4 {
  background: #ececec;
  padding: 1em 0;
  text-align: center;
}
.wrapper.style3 {
  padding: 2em 0 3.5em 0;
  background: #ececec;
}
.wrapper.style3 span {
  display: inline-block;
  padding-top: 0.80em;
  font-size: 2em;
  font-weight: 600;
}
.wrapper.style3 .button {
  float: right;
}

/* Header */
#header {
  background: #333333 url("../images/pic01.jpg") no-repeat;
  background-size: cover;
  color: #fff;
  padding: 6em 0;
  text-align: center;
  background-position: 0% 65%;
  position: relative;
}
#header:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 32, 48, 0.25);
}
#header>* {
  position: relative;
  z-index: 1;
}
.homepage #header {
  padding: 8em 0;
  background-position: center;
}
#logo {
  font-size: 2em;
}
#nav>ul {
  margin: 0;
}
#nav>ul>li {
  border-radius: 10px 10px 0 0;
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.5em 1.5em;
}
#nav>ul>li a {
  color: #FFF;
  text-decoration: none;
  font-size: 1.2em;
}
#nav>ul>li:first-child {
  margin-left: 0;
}
#nav>ul>li:hover a {
  color: #fff;
}
#nav>ul>li.active {
  background: #3ac984;
}
#nav>ul>li.active a {
  color: white;
}
#nav>ul>li>ul {
  display: none;
}

/* Dropotron */
.dropotron {
  margin-top: -2px;
  background: #3ac984;
  border-radius: 10px;
  color: white;
  min-width: 12em;
  padding: 1em 0;
}
.dropotron>li {
  line-height: 2em;
  padding: 0 1em;
}
.dropotron>li>a {
  color: #FFF;
  text-decoration: none;
}
.dropotron>li.active>a,
.dropotron>li:hover>a {
  color: #FFF;
}
.dropotron.level-0 {
  border-radius: 0 10px 10px 10px;
  font-size: 1em;
}

/* Banner */
#banner {
  text-align: center;
  padding: 4em 0 0 0;
}
#banner .major h2 {
  font-size: 3.5em;
}
#banner .major .byline {
  display: block;
  margin: 0em 2em;
  line-height: 1.6em;
  font-size: 1.5em;
}
#banner a {
  color: inherit;
}

/* Main */
.no-sidebar #main .major,
.left-sidebar #main .major,
.right-sidebar #main .major {
  text-align: left;
}
.homepage #main .major {
  text-align: center;
}
#main {
  padding: 6em 0;
}
#main .sidebar .major {
  padding-bottom: 2em;
}
#main .sidebar .major h2 {
  font-size: 1.8em;
}
#main .sidebar .default li {
  border-color: #cdcdcd;
}
#main .sidebar .default a {
  color: #464646;
}
#main .sidebar> :first-child {
  margin-bottom: 3em;
}

/* Footer */
#footer {
  padding: 4em 0;
  color: #fff;
}
#footer .major h2 {
  font-size: 2em;
  color: #FFF;
}
#footer .major .byline {
  font-size: 1.1em;
}
#footer .copyright {
  margin-top: 3em;
  padding-top: 3em;
  border-top: 1px solid;
  border-color: rgba(192, 192, 192, 0.15);
  text-align: center;
  color: inherit;
}
#footer a {
  color: inherit;
}
#middle {
  height: 600px;
  width: 300px;
  background: green;
}
<!DOCTYPE HTML>
<!--
	Horizons by TEMPLATED
	templated.co @templatedco
	Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>

<head>
  <title>Horizons by TEMPLATED</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.dropotron.min.js"></script>
  <script src="js/skel.min.js"></script>
  <script src="js/skel-layers.min.js"></script>
  <script src="js/init.js"></script>
  <noscript>
			<link rel="stylesheet" href="css/skel.css" />
			<link rel="stylesheet" href="css/style.css" />
		</noscript>
  <!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>

<body class="homepage">

  <!-- Header -->
  <div id="header">
    <div class="container">

      <!-- Logo -->
      <h1><a href="#" id="logo">Vista 702</a></h1>

      <!-- Nav -->
      <nav id="nav">
        <ul>
          <li><a href="#fotos">Fotos</a></li>
          <li><a href="#depoimentos">Depoimentos</a></li>
          <li><a href="#planos">Planos</a></li>
      </nav>


      <!-- Banner -->
      <div id="banner">
        <div class="container">
          <section>
            <header class="major">
              <h2>Vista 702</h2>
              <span class="byline">&hellip; a melhor vista de Juiz de Fora para se passar o feriado, réveillon e comemorações em geral.</span>
            </header>
            <a href="#" class="button alt">Sign Up</a>
          </section>
        </div>
      </div>

    </div>
  </div>

  <!-- Featured -->
  <div class="wrapper style2">
    <section class="container">
      <header class="major">
        <a id="fotos"></a>
        <h2>Fotos</h2>
        <span class="byline">Sua visita começa aqui.</span>
      </header>
      <div class="row no-collapse-1">
        <section class="4u">
          <a class="image feature"><img src="images/pic02.jpg" alt=""></a>
          <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
        </section>
        <section class="4u">
          <a class="image feature"><img src="images/pic03.jpg" alt=""></a>
          <p>Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis. Donec magna.</p>
        </section>
        <section class="4u">
          <a class="image feature"><img src="images/pic04.jpg" alt=""></a>
          <p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
        </section>
      </div>
    </section>
  </div>


  <div class="wrapper style2">
    <section class="container">
      <header class="major">
        <a id="depoimentos"></a>
        <h2>Depoimentos</h2>
        <span class="byline">Os viajantes recomendam.</span>
      </header>





      <div class="row no-collapse-1">
        <section class="">
          <a class="image feature2"><img src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left"=""></a>
          <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
        </section>

        <section class="">
          <a class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
          <p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
        </section>
      </div>
    </section>
  </div>

  <!-- Main -->
  <div id="main" class="wrapper style1">
    <section class="container">
      <header class="major">
        <a id="planos"></a>
        <h2>Uma janelas, diversas</h2>
        <span class="byline">Um plano para todos os bolsos.</span>
      </header>
      <div class="row">

        <!-- Content -->
        <div class="6u">
          <section>
            <ul class="style">
              <li>
                <span class="fa fa-wrench"></span>
                <h3>Integer ultrices</h3>
                <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
              </li>
              <li>
                <span class="fa fa-cloud"></span>
                <h3>Aliquam luctus</h3>
                <span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
              </li>
            </ul>
          </section>
        </div>
        <div class="6u">
          <section>
            <ul class="style">
              <li>
                <span class="fa fa-cogs"></span>
                <h3>Integer ultrices</h3>
                <span>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim.</span>
              </li>
              <li>
                <span class="fa fa-leaf"></span>
                <h3>Aliquam luctus</h3>
                <span>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Maecenas condimentum enim tincidunt risus accumsan.</span>
              </li>
            </ul>
          </section>
        </div>

      </div>
    </section>
  </div>

  <!-- Footer -->
  <div id="footer">
    <div class="container">

      <!-- Lists -->
      <div class="row">
        <div class="8u">
          <section>
            <header class="major">
              <h2>Donec dictum metus</h2>
              <span class="byline">Quisque semper augue mattis wisi maecenas ligula</span>
            </header>
            <div class="row">
              <section class="6u">
                <ul class="default">
                  <li><a href="#">Pellentesque elit non gravida blandit.</a></li>
                  <li><a href="#">Lorem ipsum dolor consectetuer elit.</a></li>
                  <li><a href="#">Phasellus nibh pellentesque congue.</a></li>
                  <li><a href="#">Cras vitae metus aliquam  pharetra.</a></li>
                </ul>
              </section>
              <section class="6u">
                <ul class="default">
                  <li><a href="#">Pellentesque elit non gravida blandit.</a></li>
                  <li><a href="#">Lorem ipsum dolor consectetuer elit.</a></li>
                  <li><a href="#">Phasellus nibh pellentesque congue.</a></li>
                  <li><a href="#">Cras vitae metus aliquam  pharetra.</a></li>
                </ul>
              </section>
            </div>
          </section>
        </div>
        <div class="4u">
          <section>
            <header class="major">
              <h2>Donec dictum metus</h2>
              <span class="byline">Mattis wisi maecenas ligula</span>
            </header>
            <ul class="contact">
              <li>
                <span class="address">Address</span>
                <span>1234 Somewhere Road #4285 <br />Nashville, TN 00000</span>
              </li>
              <li>
                <span class="mail">Mail</span>
                <span><a href="#">someone@untitled.tld</a></span>
              </li>
              <li>
                <span class="phone">Phone</span>
                <span>(000) 000-0000</span>
              </li>
            </ul>
          </section>
        </div>
      </div>

      <!-- Copyright -->
      <div class="copyright">
        Design: <a href="http://templated.co">TEMPLATED</a> Images: <a href="http://unsplash.com">Unsplash</a> (<a href="http://unsplash.com/cc0">CC0</a>)
      </div>

    </div>
  </div>
  <a id="middle"></a>
</body>

</html>

谢谢

3 个答案:

答案 0 :(得分：1)

只需在文本元素上使用white-space: nowrap即可使文本停留在同一行上，而与父级大小无关。

对于图像，您需要在父容器上添加margin或padding。

即

.4u p {
  white-space: nowrap;
}

和

.4u{
  padding: 0.23em;
}

或

.4u{
  margin: 0.23em;
}

答案 1 :(得分：0)

编辑： 这是我对您的代码所做的更改

.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.flex-item + .flex-item {
  margin-top: 30px;
}

.image.feature2 {
  display: block;
  margin: 0 0 7em 0;
}


<div class="row no-collapse-1">
  <div class="flex">
    <section class="flex-item">
      <a  class="image feature2"><img 
src="https://abrilexame.files.wordpress.com/2016/09/size_960_16_9_google-robert-bunsen.jpg" align="left" =""></a>
  <p>Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat.</p>
</section>

<section class="flex-item">
  <a  class="image feature2"><img src="https://eduardhosp-alemao.com.br/wp-content/uploads/2018/05/Hashtag-Google-Alem%C3%A3o-Sem-Complica%C3%A7%C3%A3o.jpg" align="left"></a>
  <p>Curabitur sem urna, consequat vel, suscipit convallis sem leo, mattis placerat, nulla. Sed ac leo.</p>
</section>

答案 2 :(得分：0)

显然页脚背景也丢失了

相关问题
最新问题