文章/答案/技术大牛

发布

社区首页 >问答首页 >我的图像溢出到了我的flexbox容器之外

问我的图像溢出到了我的flexbox容器之外
EN

Stack Overflow用户

提问于 2017-07-29 20:20:42

回答 1查看 695关注 0票数 3

我的flexbox容器有问题。我试着搜索我的问题，但找不到它是什么。

我的容器中的图像很大，并且正在从容器中溢出。

我尝试过使用.img { max-width:100% }、width、align-content: flex-start，但都不起作用。

谁能告诉我我做错了什么？

也非常感谢大家之前和这次对我的帮助！

body {
  background-color: #CCC;
  color: black;
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
  display: flex;
  flex-direction: column;
  border-color: black;
  border-style: solid;
  border-width: 15px;
  margin: 0;
}

.header {
  align-items: center;
}

.logo {
  display: flex;
  font-size: 1.5em;
  font-family: 'sans-serif';
  color: black;
  text-decoration: none;
  margin: 80px auto 15px 20%;
}

.nav-bar {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 0 auto;
  justify-content: center;
  width: 250px;
  font-size: 1em;
}

li .col,
.decor {
  text-decoration: none;
  color: white;
  font-size: 1.2em;
  padding: 10px;
}

.col {
  list-style: none;
}

ul li a.selected,
.decor:hover {
  color: black;
}

.intro {
  display: flex;
  flex-wrap: wrap;
  margin: 35px auto 0 20%;
  max-width: 450px;
  justify-content: flex-start;
}

#wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin: 10px auto;
  justify-content: center;
  background-color: green;
  height: 500px;
  max-width: 900px;
}


}
#wrapper li {
  padding: 5px;
  background-color: red;
}

<head>
  <meta charset="utf-8">
  <title>Project of Martin Wong | HTML, CSS and Javascript</title>
  <link href="css/normalize.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <link href="css/flexbox.css" rel="stylesheet">
</head>

<body>

  <!-- TOP HEADING LOGO AND NAV BAR-->
  <header class="header">
    <a href="index.html" class="logo">
      <h1>Martin Wong</h1>
    </a>
    <ul class="nav-bar">
      <li class="col"> <a href="index.html" class="selected decor">Portfolio</a> </li>
      <li class="col"> <a href="aboutme.html" class="decor">About me</a></li>
      <li class="col"> <a href="contact.html" class="decor">Contact</a></li>
    </ul>
  </header>
  <!------------------------------------------------------------------------>

  <div class="intro">
    <h2>Training my skills for the future</h2>
    <p>This is my journey to become a web developer. This website will tell my diary of my holiday that I went on in June</p>
  </div>





  <!--IMAGES IN THE MIDDLE---------------------->
  <div class="wrapper">
    <section>
      <ul id="wrapper">
        <li>
          <a href="img/bro-and-me.jpg" class="container-image">
            <img src="img/bro-and-me.jpg" alt="brother&me" class="img">
            <p>A RARE half decent photo of me(right) and my brother(left) in Singapore. Photo taken by my father, And being ruined by mom walking into shot </p>
          </a>
        </li>
        <li>
          <a href="img/father.jpg" class="container-image">
            <img src="img/father.jpg" alt="father" class="img">
            <p>Father telling us a story while mom sniggers at a inside joke about our father</p>
          </a>
        </li>
        <li>
          <a href="img/mom.jpg" class="container-image">
            <img src="img/mom.jpg" alt="mom" class="img">
            <p>Mom feeling unwell on the journey to the big Buddha</p>
          </a>
        </li>
        <li>
          <a href="img/Park-plaza.jpg" class="container-image">
            <img src="img/Park-plaza.jpg" alt="parkplaza" class="img">
            <p>Park Plaza foodcourt. Cheap, delicious and quick-serving meals where I have many memories of</p>
          </a>
        </li>
      </ul>
    </section>
  </div>

html

css

flexbox

回答 1

Stack Overflow用户

发布于 2017-07-29 20:33:22

在div中定义柱网轴线。这可能会有帮助

例如：

<div class="wrapper col-md-12">
//content
</div>

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45389221

复制

相似问题

问我的图像溢出到了我的flexbox容器之外
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的图像溢出到了我的flexbox容器之外EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我的图像溢出到了我的flexbox容器之外
EN