Question

这是布局：

＆＃13;

    .article-box
    {
      display: flex;
      border: 1px solid transparent;
       box-shadow: rgba(50, 50, 50, 0.74902) 10px 5px 8px -2px;
    }
    .article-box:hover
    {
      
      border: 1px solid transparent;
      box-shadow: rgba(50, 50, 50, 0.74902) 13px 8px 18px -2px;
    
    
    }
    .article-image
    {
      padding:3px;border:thick solid black;
      height: 250px;
      width:250px;
      display: inline-block;
      float:left;
    }
    
    .article-box-text
    {
      margin: 20px;
      height: 250px;
      width:450px;
      background-color: #ffffff;
      border: 1px solid black;
      opacity: 0.6;
    	flex: 1;
    }
    .article-box-text p
    {
    margin: 5%;
      font-weight: bold;
      color: #000000;
    
    }

＆＃13;

    <div class="article-list">
        <div class="article-box">
        <a href="example.com">
        <img class="article-image" src="example.jpeg" alt="" width="150" height="150"/></a>
        <div class="article-box-text"><p>Example statement</p></div>
        </div>
        </div>

＆＃13;

对于这个特定的代码和css，我如何能够包装整个事物并使其可点击而不会扭曲设置。因为现在如果我放置文章框，它会搞乱设置，框会出现在彼此的顶部和底部。基本上我想要一个大盒子，里面有一个带文字的盒子旁边有一个图像。框和文本应具有单独的边框，而不是重叠。带图像和文本本身的较大的框应该可以点击，而不仅仅是图像。我在互联网上尝试过多种东西，他们要么弄乱布局要么根本不工作，只留下图像可点击。也许唯一的选择是将整个事物放在一个并尝试将它们彼此定位？

感谢您的帮助。

Answer 1

HTML 5更适合您在a代码（https://developer.mozilla.org/en/docs/Web/HTML/Element/a）中包含的内容，因此您可以将article-box div替换为a类。

＆＃13;

.article-box {
  display: flex;
  border: 1px solid transparent;
  box-shadow: rgba(50, 50, 50, 0.74902) 10px 5px 8px -2px;
}

.article-box:hover {
  border: 1px solid transparent;
  box-shadow: rgba(50, 50, 50, 0.74902) 13px 8px 18px -2px;
}

.article-image {
  padding: 3px;
  border: thick solid black;
  height: 250px;
  width: 250px;
  display: inline-block;
  float: left;
}

.article-box-text {
  margin: 20px;
  height: 250px;
  width: 450px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  flex: 1;
}

.article-box-text p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}

＆＃13;

<div class="article-list">
<a class="article-box" href="example.com">
    <img class="article-image" src="example.jpeg" alt="" width="150" height="150" />
    <div class="article-box-text">
      <p>Example statement</p>
    </div>
  </a>
</div>

＆＃13;

Div和a并排示例：https://jsfiddle.net/y66pok0d/

Answer 2

一个很大的问题是您使用<div>来包含<p>元素。似乎删除<div>并使用其他元素可能会让您到达那里。它们都可以包含在<a>锚中。我还要为display锚点链接将inline-block设置为<a>。

这是一个起点：

HTML

<div class="article-list">
    <div class="article-box">
    <a href="example.com">
    <img class="article-image" src="example.jpeg" alt="" width="150" height="150"/>
    <span class="article-box-text"><span>Example statement</span></span>
    </a>
    </div>
</div>

CSS

.article-box
{
  display: flex;
  border: 1px solid transparent;
   box-shadow: rgba(50, 50, 50, 0.74902) 10px 5px 8px -2px;
}
.article-box:hover
{

  border: 1px solid transparent;
  box-shadow: rgba(50, 50, 50, 0.74902) 13px 8px 18px -2px;
}
.article-box a
{
    display: inline-block;
}
.article-image
{
  padding:3px;border:thick solid black;
  height: 250px;
  width:250px;
  display: inline-block;
  float:left;
}

.article-box-text
{
  display: block;
  margin: 20px;
  height: 250px;
  width:450px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  flex: 1;
}
.article-box-text span
{
margin: 5%;
  font-weight: bold;
  color: #000000;

}

https://jsfiddle.net/nLv418e2/

Css-如何使包含图像和文本的整个div可点击：具体示例

2 个答案: