Question

所以我在边框内有一个图像和一些文字。我试图在边界上找到一个词，我似乎无法找到一种方法。

我的HTML

<div class="img">
        <img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
        <div class="text">
            Calibre: From 1 up to 5 mm <br>

            Packing: jute or polypropylene bags , Vacuum & Carton <br>

            Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc. <br>
        </div>
        <h2> Sliced </h2>
</div>

CSS

.img {
   float: left;
   border-style: solid;
   border-width: 2px;
   border-color: 24AB36;
   padding: 20px;
}

我希望标题2位于边框上。

我该怎么做？

Answer 1

如果您想要边框上的文字，可以使用fieldset

<强> SEE DEMO

＆＃13;

<fieldset>
    <legend>Title Text</legend>
       CONTENT HERE
</fieldset>

＆＃13;

<强> HTML

<fieldset class="field_set">
    <legend style="text-align: center;"><h2>Sliced</h2></legend>
    <div class="img">
        <img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
        <div class="text">
            Calibre: From 1 up to 5 mm <br>

            Packing: jute or polypropylene bags , Vacuum & Carton <br>

            Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc. <br>
        </div> 
      </div>
</fieldset>

<强> CSS：

.img {
   float: left;
   padding: 20px;
}

.field_set{
    border-width:6px;
    border-color:#F00;
    border-style: solid; 
}

Answer 2

我无法看到文本如何适合你的div的2px边框，所以我认为你的意思是填充。

在这种情况下，将.img的位置设置为relative，将h2的位置设置为绝对值，并使用一些猜测来使用顶部和左侧属性将其移动到填充中。

http://jsfiddle.net/prashanthcr/p2zmc4o5/1/

.img {
<other properties omitted for brevity>
position: relative;
}

h2 {
position: absolute;
top: 395px;
left: 180px;
}

Answer 3

Fieldset可能有效，但fieldset标记通常在表单中用于对控件/输入元素进行分组，例如一组复选框。

对于h2这样的样式和定位可能会更加语义正确：

body {
  padding: 20px;
}
.img {
  float: left;
  border-style: solid;
  border-width: 2px;
  border-color: 24AB36;
  padding: 20px;
  position: relative;
}
.img h2 {
  position: absolute;
  background: white;
  top: -1.65em;
}

<div class="img">
  <h2> Sliced </h2>
  <img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
  <div class="text">
    Calibre: From 1 up to 5 mm
    <br>Packing: jute or polypropylene bags , Vacuum & Carton
    <br>Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc.
    <br>
  </div>

</div>

或者，如果你不关心语义，你可以使用像这样的伪元素：

.img::before {
  content: "Sliced";
  font-size: 2em;
  position: absolute;
  background: white;
  top: -0.75em;
  left: 0.75em;
}

body {
  padding: 20px;
}
.img {
  float: left;
  border-style: solid;
  border-width: 2px;
  border-color: 24AB36;
  padding: 20px;
  position: relative;
}
.img::before {
  content: "Sliced";
  font-size: 2em;
  position: absolute;
  background: white;
  top: -0.75em;
  left: 0.75em;
}

<div class="img">
  <img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
  <div class="text">
    Calibre: From 1 up to 5 mm
    <br>Packing: jute or polypropylene bags , Vacuum & Carton
    <br>Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc.
    <br>
  </div>
</div>

在边框上添加文字

3 个答案: