1. 首页
  2. 问题列表
  3. 我试着把我的.span放在我的.texto旁边，但是当我设置我的.span的宽度时，它们会崩溃，我该怎么做？
提问者：小点点

我试着把我的.span放在我的.texto旁边，但是当我设置我的.span的宽度时，它们会崩溃，我该怎么做？


null

/* tamaño del html */

html {
  height: 100%;
  overflow-x: hidden;
}


/* Tamaño del body y su background*/

body {
  box-sizing: border-box;
  background-color: white;
  min-height: 100%;
  padding: 0;
  margin: 0;
}


/* estilos del header*/

header {
  margin-top: 30px;
  font-size: 30px;
  margin-left: 60px;
  color: rgb(0, 0, 0);
  border: 2px red solid;
}


/*estilos de la barra de navegacion y breadcrumbs*/

nav {
  overflow: hidden;
  background-color: #141414;
}

nav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

a.current {
  color: yellow;
}

a.current:hover {
  background-color: rgb(78, 73, 73);
}

a:hover {
  background-color: red;
}


/* fin de la barra de navegacion*/


/*estilos del section y primera maquetacion de la web*/

#primera_seccion {
  width: 100%;
  border: red solid 2px;
  margin: 0 auto;
  height: 100%;
}

.span {
  border: 2px solid red;
  display: inline-block;
  margin: 0;
  padding: 0;
}

.imagen {
  width: 50%;
  height: 30%;
}

.texto {
  border: 2px red solid;
  display: inline-block;
  width: 70%;
  text-indent: 20px;
  font-size: 150%;
  padding: 0;
  margin: 0;
}


/* comienzo de la maquetacion de la segunda seccion del index*/

#segunda_seccion {
  margin: 0;
  padding: 0;
  clear: both;
  color: white;
  height: 130%;
  width: 100%;
  border: 1px solid transparent;
  background-color: rgb(161, 160, 160);
}

#grailed {
  font-weight: bolder;
}

.texto2 {
  text-align: center;
  padding: 25px;
  font-size: 50px;
  font-family: 'Montserrat';
  border: 1px solid transparent;
  color: black;
}

#imagen2 {
  width: 70%;
  height: 90%;
  margin-left: 16.5%;
  border: 1px transparent solid;
  margin-bottom: 5%;
}


/* estilos y maquetacion de la tercera seccion*/

.tercera_seccion {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  background-color: #141414;
}

.texto3 {
  color: white;
  font-family: 'Monstserrat';
  text-align: center;
  padding: 25px;
  font-size: 50px;
}

.imagen3 {
  width: 70%;
  height: 60%;
  margin-left: 15%;
}

.Morningstar {
  font-weight: bolder;
}


/*comienzo del footer*/

.footer {
  margin: 0;
  color: black;
  text-align: center;
  background-color: white;
  padding: 35px;
  border: 1px solid transparent
}
<!DOCTYPE html>
<html lang="es">

<head>
  <!--Meta etiquetas, tittle y links de importacion de fuentes-->
  <title>Alonso Gonzalez</title>
  <meta charset="UTF-8">
  <link href="css/index2.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Homemade Apple" rel="stylesheet" />
</head>

<body>
  <!--Cabecera-->
  <header>
    <h1>Alonso Gonzalez - <br/> Desarrollador web</h1>
  </header>
  <!--Barra de navegacion-->
  <nav>
    <a href="#" class="current">&Iacutendice</a>
    <a href="portafolio.html">Portafolio</a>
    <a href="presupuesto.html">Presupuesto</a>
    <a href="contacto.html">Contacto</a>
  </nav>
  <!--Ejemplos de trabajos-->
  <!--Presentacion-->
  <div id="primera_seccion">
    <span class="span">
                <img class="imagen" src="img/happy-software-developer.jpg">
            </span>
    <div class="texto">
      <p>Bienvenido, soy Alonso Gonzalez he sido desarrolador web por 10 años empec&eacute mi carrera como un pasatiempo. Hoy en dia soy un desarrollador web profesional que crea p&aacuteginas sofisticadas para empresas y multinacionales, mis especialidades
        incluyen diseño y animaci&oacuten.</p><br/>
      <p>Si estas buscando un desarrollador confiable y trabajador para mejorar tu web, implementar una interfaz amigable para los usuarios y trabajar al unisono con multiple compañeros, yo soy tu persona ideal</p>
    </div>
  </div>
  <!--Primer trabajo-->
  <div id="segunda_seccion">
    <div class="caja2">
      <p class="texto2"> <span id="grailed">Grailed</span> - Un creativo e innovador diseño web para vender y comprar ropa,<br/> hecho con simplicidad y elegancia</p>
    </div>
    <img id="imagen2" src="img/grailed2.png" alt="aplicacion Grailed" />
  </div>
  <!--Segundo trabajo-->
  <div class="tercera_seccion">
    <span>
                <p class="texto3"><span class="Morningstar">Morningstar</span>- Un diseño sencillo y practico en el que trabaje para darle dinamismo y un sistema responsive a la web</p>
    </span>
    <img src="img/Morningstar-removebg-preview-removebg-preview.png" class="imagen3" alt="aplicacion Morningstar" />
  </div>
  <!--pie de pagina-->
  <footer class="pie">
    <div class="caja3">
      <p class="footer">Todos los Derechos Reservados</p>
    </div>
  </footer>
</body>

</html>

null


共1个答案

匿名用户

您的代码在web标准方面有很多问题，但我希望这是您正在寻找的。

null

html {
  height: 100%;
  overflow-x: hidden;
}


/* Tamaño del body y su background*/

body {
  box-sizing: border-box;
  background-color: white;
  min-height: 100%;
  padding: 0;
  margin: 0;
}


/* estilos del header*/

header {
  margin-top: 30px;
  font-size: 30px;
  margin-left: 60px;
  color: rgb(0, 0, 0);
  border: 2px red solid;
}


/*estilos de la barra de navegacion y breadcrumbs*/

nav {
  overflow: hidden;
  background-color: #141414;
}

nav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

a.current {
  color: yellow;
}

a.current:hover {
  background-color: rgb(78, 73, 73);
}

a:hover {
  background-color: red;
}


/* fin de la barra de navegacion*/


/*estilos del section y primera maquetacion de la web*/

#primera_seccion {
  width: 100%;
  border: red solid 2px;
  margin: 0 auto;
  display: inline-block;
}

.texto-img {
  width: 29%;
  float: left;
}
.texto-img img{
  width: 100%;
  border: 2px solid red;
}

.texto {
  width: 70%;
  font-size: 22px;
  border: 2px solid red;
  float: left;
}


/* comienzo de la maquetacion de la segunda seccion del index*/

#segunda_seccion {
  margin: 0;
  padding: 0;
  clear: both;
  color: white;
  height: 130%;
  width: 100%;
  border: 1px solid transparent;
  background-color: rgb(161, 160, 160);
}

#grailed {
  font-weight: bolder;
}

.texto2 {
  text-align: center;
  padding: 25px;
  font-size: 50px;
  font-family: 'Montserrat';
  border: 1px solid transparent;
  color: black;
}

#imagen2 {
  width: 70%;
  height: 90%;
  margin-left: 16.5%;
  border: 1px transparent solid;
  margin-bottom: 5%;
}


/* estilos y maquetacion de la tercera seccion*/

.tercera_seccion {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  background-color: #141414;
}

.texto3 {
  color: white;
  font-family: 'Monstserrat';
  text-align: center;
  padding: 25px;
  font-size: 50px;
}

.imagen3 {
  width: 70%;
  height: 60%;
  margin-left: 15%;
}

.Morningstar {
  font-weight: bolder;
}


/*comienzo del footer*/

.footer {
  margin: 0;
  color: black;
  text-align: center;
  background-color: white;
  padding: 35px;
  border: 1px solid transparent
}
<!--Cabecera-->
  <header>
    <h1>Alonso Gonzalez - <br/> Desarrollador web</h1>
  </header>
  <!--Barra de navegacion-->
  <nav>
    <a href="#" class="current">&Iacutendice</a>
    <a href="portafolio.html">Portafolio</a>
    <a href="presupuesto.html">Presupuesto</a>
    <a href="contacto.html">Contacto</a>
  </nav>
  <!--Ejemplos de trabajos-->
  <!--Presentacion-->
  <div id="primera_seccion">
    <div class="texto-img">
          <img class="imagen" src="https://dummyimage.com/400x400/000/fff">
    </div>
    <div class="texto">
      <p>Bienvenido, soy Alonso Gonzalez he sido desarrolador web por 10 años empec&eacute mi carrera como un pasatiempo. Hoy en dia soy un desarrollador web profesional que crea p&aacuteginas sofisticadas para empresas y multinacionales, mis especialidades
        incluyen diseño y animaci&oacuten.</p><br/>
      <p>Si estas buscando un desarrollador confiable y trabajador para mejorar tu web, implementar una interfaz amigable para los usuarios y trabajar al unisono con multiple compañeros, yo soy tu persona ideal</p>
    </div>
  </div>
  <!--Primer trabajo-->
  <div id="segunda_seccion">
    <div class="caja2">
      <p class="texto2"> <span id="grailed">Grailed</span> - Un creativo e innovador diseño web para vender y comprar ropa,<br/> hecho con simplicidad y elegancia</p>
    </div>
    <img id="imagen2" src="img/grailed2.png" alt="aplicacion Grailed" />
  </div>
  <!--Segundo trabajo-->
  <div class="tercera_seccion">
    <span>
                <p class="texto3"><span class="Morningstar">Morningstar</span>- Un diseño sencillo y practico en el que trabaje para darle dinamismo y un sistema responsive a la web</p>
    </span>
    <img src="img/Morningstar-removebg-preview-removebg-preview.png" class="imagen3" alt="aplicacion Morningstar" />
  </div>
  <!--pie de pagina-->
  <footer class="pie">
    <div class="caja3">
      <p class="footer">Todos los Derechos Reservados</p>
    </div>
  </footer>

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS